我需要在同一页面上有多个模式窗口。基本上我打算有一个指向每个团队成员的链接,然后单击后会在模式框中弹出他们的详细信息。我正在使用 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">×</a>
</div>
js
$('#myButton').click(function(e) {
e.preventDefault();
$('#myModal').reveal();
});
最佳答案
我刚刚做了这件事。我预计它会比实际情况复杂得多,所以我一直在错误的地方寻找。这一切都在 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">×</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">×</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">×</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 标记的模式。
就像我说的,比我预期的要容易得多。 :)
关于jquery - 调用多个 Reveal 模态 Reveal.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13748765/