调用多个显示模式reveal.js

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

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>

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

来源

2012-12-06 Rob

当你实现它会发生什么？是不是打开所有的模式？如果你在jsfiddle中有样本，那会很好。 – Sridhar

你的动机是什么？在同一时间显示多于一个模式，或通过不同的按钮点击打开多个实例。 – Jai

用不同的信息打开不同的模态。所以如果我有乔，玛丽和安，如果用户点击乔，他的信息会弹出。该演示仅适用于网页上的ne模式。 – Rob

-1

试试这个插件多个窗口。最小化，最大化，移动，关闭，覆盖，菜单和更多：

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

来源

2012-12-27 04:45:48 toto

链接不起作用 –

我只是这样做确切的事情。我预料它会比现在更复杂，所以我一直在错误的地方看。这一切都在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>

接下来你有做创建相应的链接，推出每个人，使他们独特的“数据显示-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标签触发模式。

就像我说过的，WAY比我预期的要容易。 :)

来源

2013-03-27 16:23:25 StephenESC

这对我有很大的帮助。非常感谢。 – GhostRider

调用多个显示模式reveal.js

回答

相关问题