调用多个显示模态reveal.js

Question

我需要在同一页上有多个模式窗口。基本上，我打算有一个链接到每个团队成员，然后将弹出他们的详细信息在一个模式框中点击。我使用的是zurb的插件。这是网站上的示例。

html：

<div id="myModal" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

js

$('#myButton').click(function(e) {
          e.preventDefault();
      $('#myModal').reveal();
     });

Answer 1

我就是这么做的。我预计它会比实际情况复杂得多，所以我一直在寻找错误的地方。这一切都在HTML中得到了解决！

首先，将上面发布的代码复制到您想创建的任意多个通道中，使"div id“对每个通道都是唯一的(按照上面的示例)：

<div id="JOE" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

<div id="MARY" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

<div id="ANN" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

接下来，您需要做的就是创建相应的链接来启动每个链接，使其唯一的“data-data id”值与上面创建的id相匹配，并将它们放在布局中需要它们的任何位置：

<a href="#" data-reveal-id="JOE" data-animation="fade">JOE</a>
<a href="#" data-reveal-id="MARY" data-animation="fade">MARY</a>
<a href="#" data-reveal-id="ANN" data-animation="fade">ANN</a>

每个链接将只触发具有匹配id标签的模式。

就像我说的，比我想象的要容易得多。:)

Answer 2

尝试在多个窗口中使用此插件。最小化、最大化、移动、关闭、覆盖、菜单等：

http://des.delestesoft.com:8080/?go=3