2

我需要在同一页面上有多个模式窗口。基本上我打算有一个链接到每个团队成员，然后单击时会在模式框中弹出打开他们的详细信息。我正在使用 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();
     });
4

2 回答 2

3

我只是做了这件事。我预计它会比实际复杂得多，所以我一直在错误的地方寻找。这一切都在 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 标签的模式。

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

于 2013-03-27T16:23:25.397 回答
-1

试试这个插件的多个窗口。最小化、最大化、移动、关闭、覆盖、菜单等：

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

于 2012-12-27T04:45:48.737 回答