如何在一個頁面中獲得兩個模態對話框？

Question

我在我的網頁中有兩個模態對話框，使用Twitter-bootstrap，但只有其中一個工作。

下面是代碼：

<a href="#format" role="button" class="btn btn-info" data-toggle="format">Phone and Email</a> 
<div id="format" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="format" aria-hidden="true"> 
    <div class="modal-header"> 
    <!--This needs a fancy phone icon and so does the button.--> 
    <img src="img/numberheader.png" alt=""> 
    </div> 
    <div class="modal-body"> 
    <p> 
    <h4>Office:</h4> 
    123 4567<br> 
    <h4>Programme Manager:</h4> 
    765 4321<br> 
    <hr> 
    <img src="img/emailheader.png" alt=""> 
    <h4>Email us</h4>Iremovedthemailaddresses<br> 
    <a href="Iremovedthemailaddresses" class="btn-primary btn-small">Click Here To Email Us</a> 
    <br> 
    </p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
    </div> 
<a href="#myModal" role="button" class="btn btn-info" data-toggle="modal">Phone and Email</a> 
<div id="myModal" class="modal hide fade" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-header"> 
<!--This needs a fancy phone icon and so does the button.--> 
<img src="img/numberheader.png" alt=""> 
</div> 
<div class="modal-body"> 
<p> 
<h4>Office:</h4> 
123 4567<br> 
<h4>Programme Manager:</h4> 
765 4321<br> 
<hr> 
<img src="img/emailheader.png" alt=""> 
<h4>Email us</h4>Iremovedthemailaddresses<br> 
<a href="Iremovedthemailaddresses" class="btn-primary btn-small">Click Here To Email Us</a> 
<br> 
</p> 
</div> 
<div class="modal-footer"> 
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button> 
</div> 
</div> 

兩個情態動詞的內容沒有被分離成什麼它的意思是的是，它在這一點上的概念恰恰證明了（所以忽略內容） 。

但是，它只適用於第二個，而不是第一個。我能做些什麼來使兩種模式都起作用？

Answer 1

確保您的錨標籤和模式ID是唯一的。

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

演示：http://jsfiddle.net/uf2UR/