Question

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

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中处理了！

首先，复制您在上面发布的代码，以获得您想要创建的多个模态，使＆＃34; div id＆＃34;每一个都是唯一的（按照上面的例子）：

<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>

接下来，您需要创建相应的链接以启动每个链接，使其独特的数据显示ID＃34;值与您在上面创建的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

调用多个揭示模态reveal.js

2 个答案: