每頁有多個模態

Question

我創建了一個網站，用戶可以點擊圖像打開一個模式與菜單項，而第一模態工作正常，後來的模態不會。

JS代碼：

<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myImg"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 

HTML，其中它的使用：

<div class="col-md-3"> 
     <h2>Starters</h2> 
     <img src="http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2007/2/9/0/ie0102_coleslaw.jpg" height="100%" width="100%" id="myImg"> 
       <!-- The Modal --> 
       <div id="myModal" class="modal"> 

        <!-- Modal content --> 
        <div class="modal-content"> 
        <div class="modal-header"> 
         <span class="close">×</span> 
         <br> 
         <h2>Starters</h2> 
        </div> 
        <div class="modal-body"> 
         <p><b>PRODUCT <span style="display:inline-block; width: 75%;"></span> PRICE</b></p> 
         <hr> 
         <p> Humus <span style="display:inline-block; width: 78%;"></span> £3.00</p> 
         <p> Dolma <span style="display:inline-block; width: 78%;"></span> £3.20</p> 
         <p> Coleslaw <span style="display:inline-block; width: 77%;"></span> £1.50</p> 
         <p> Prawn Cocktail <span style="display:inline-block; width: 73.5%;"></span> £4.60</p> 
        </div> 

        </div> 

       </div> 

    </div> 

    <div class="col-md-3"> 
     <h2>Wraps</h2> 
     <img src="http://harryskebabs.com/images/demo/menu-main/menu-item-large-20.jpg" height="100%" width="100%" id="myImg"> 

       <div id="myModal" class="modal"> 

        <!-- Modal content --> 
        <div class="modal-content"> 
        <div class="modal-header"> 
         <span class="close">×</span> 
         <br> 
         <h2>Starters</h2> 
        </div> 
        <div class="modal-body"> 
         <p><b>PRODUCT <span style="display:inline-block; width: 75%;"></span> PRICE</b></p> 
         <hr> 
         <p> Chicken Wrap <span style="display:inline-block; width: 78%;"></span> £3.00</p> 
         <p> Doner Wrap <span style="display:inline-block; width: 78%;"></span> £3.20</p> 
         <p> Shish Wrap <span style="display:inline-block; width: 77%;"></span> £1.50</p> 
         <p> Kofte Wrap <span style="display:inline-block; width: 73.5%;"></span> £4.60</p> 
        </div> 

        </div> 

       </div> 

    </div> 

表示將如預期，而第二個將不會顯示在所有的第一個模式對話框，我寧可不要不必要地複製JavaScript，如果我不需要，這就是爲什麼我厭倦了這種方法。

非常新的JS和模態框，所以任何輸入將不勝感激，謝謝。

Answer 1

modal in modal.style.display = none指id爲「Modal」的元素。你有兩個元素有這個但id s給HTML元素需要唯一。

這適用於所有id s，所以你必須改變給你的圖像獨特的id。