我在一個頁面上有兩個模態（我正在使用引導程序）； 單擊任何模態只會打開第一個。 我不懂js； 有 html 修復嗎？

Question

這是第一個模態的代碼； 接下來兩個模態中的所有變化都是內部的圖像鏈接，但只有這些顯示出來。

<div id="modallinkleft">
  <a href="#myModal" data-toggle="modal">
  <img src="mylinks/cp/117s.jpg">
  <img src="mylinks/cp/23s.jpg">
  <img src="mylinks/cp/08s.jpg">
  </a>
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
      <img src="mylinks/cp/117.jpg">
      <img src="mylinks/cp/23.jpg">
      <img src="mylinks/cp/08.jpg">
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">x</button>
    </div>
  </div>
</div>

Answer 1

每個模態應該被賦予不同的 id並且每個鏈接都應該針對不同的模態 id 。 所以它應該是這樣的：

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

這樣，如果你點擊第一個鏈接，它應該彈出第一個模態，如果你點擊第二個 - 彈出第二個模態。

Answer 2

Bootstrap 代碼中有一個錯誤。 我也有同樣的問題，我的兩個模態的 id 不同，但只有第一個被啟動。 當我從 index.html 中刪除第一個時，第二個模態結構就會活躍起來。

我使用的解決方法是創建一個函數，將模態附加到正文中，然后傳入兩個模態之間的差異以動態填充。 然后在需要模態時​​調用函數。

IE

 function appendModuleToBody(title){      
        $('#myModal1').remove(); // remove previously appended ones if needed
        $('#myModal2').remove();
        $( "body" ).append( ` -- modal html here -- ` }