jquery - 调用多个 Reveal 模态 Reveal.js

Question

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

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-reveal-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 标记的模式。

就像我说的，比我预期的要容易得多。 :)