調用多個顯示模式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

回答

相關問題