彈出框同時打開

Question

我有一堆圖片，點擊後會打開一個彈出框，其中包含關於所選圖片的信息，但所有彈出框同時打開。 開始，我有一些

<ul class="cenas_top"> 
      <li> 
       <div class="shape"> 
        <a href="#ef" class="overlay round"></a> 

        <div class="details"> 
         <span class="heading">Direção</span> 
         <hr />  
         <!-- Trigger/Open The Modal --> 
         <button id="myBtn">Mais</button> 
        </div> 

        <div class="bg"></div> 

        <div class="base"> 
         <img src=" alt="" /> 
        </div> 
       </div> 
       <h3>Name</h3> 
      </li> 
      <li> 
       <div class="shape"> 
        <a href="#fc" class="overlay round"></a> 

        <div class="details"> 
         <span class="heading">Direção</span> 
         <hr />  
         <!-- Trigger/Open The Modal --> 
         <button id="myBtn">Mais</button> 
        </div> 

        <div class="bg"></div> 

        <div class="base"> 
         <img src=" alt="" /> 
        </div> 
       </div> 
       <h3>Name</h3> 
      </li> 
     </ul> 

然後，我有框：

<!-- The Modal --> 
     <div id="myModal" class="modal"> 

      <!-- Modal content--> 
      <div class="modal-content" id="ef"> 
      <div class="modal-header"> 
       <span class="close">&times;</span> 
       <h2></h2> 
      </div> 
      <div class="modal-body"> 
       <p>TEXT TEXT TEXT TEXT</p> 
      </div> 
      <div class="modal-footer"> 
      </div> 
      </div> 


      <!-- Modal content--> 
      <div class="modal-content" id="fc"> 
      <div class="modal-header"> 
       <span class="close">&times;</span> 
       <h2></h2> 
      </div> 
      <div class="modal-body"> 
       <p>TEXT TEXT TEXT TEXT</p> 
      </div> 
      <div class="modal-footer"> 
      </div> 
      </div> 
     </div> 

最後，這是腳本的樣子：

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

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

      // 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> 

缺少了什麼嗎？

Answer 1

有幾個問題，你的代碼，其中一些你沒有提到的問題，但很明顯無論如何：

1）你的所有模式的內容是被稱爲「myModal」一個專區內。點擊按鈕後，可以看到該div。因此，它內的所有內容都將變得可見。您只需要打開適用於點擊按鈕的模式內容。

2）你所有的按鈕都有相同的id。這是無效的HTML。元素ID必須是唯一的。就目前而言，只有您的第一個按鈕纔會響應點擊事件。其他人將被忽略，因爲他們被認爲是無效的元素。

3）您只將關閉事件添加到第一個span。所以這再也不適用於其他任何人。

下面是一個有效的例子。注意每個按鈕的data-content屬性與相應模態的ID之間的匹配。

HTML

<ul class="cenas_top"> 
     <li> 
      <div class="shape"> 
       <a href="#ef" class="overlay round"></a> 

       <div class="details"> 
        <span class="heading">Direção</span> 
        <hr />  
        <!-- Trigger/Open The Modal --> 
        <button class="modal-button" data-content="ef">Mais</button> 
       </div> 

       <div class="bg"></div> 

       <div class="base"> 
        <img src=" alt="" /> 
       </div> 
      </div> 
      <h3>Name</h3> 
     </li> 
     <li> 
      <div class="shape"> 
       <a href="#fc" class="overlay round"></a> 

       <div class="details"> 
        <span class="heading">Direção</span> 
        <hr />  
        <!-- Trigger/Open The Modal --> 
        <button class="modal-button" data-content="fc">Mais</button> 
       </div> 

       <div class="bg"></div> 

       <div class="base"> 
        <img src=" alt="" /> 
       </div> 
      </div> 
      <h3>Name</h3> 
     </li> 
    </ul> 

<!-- The Modals --> 
    <div id="modal-ef" class="modal"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <span class="close">&times;</span> 
      <h2></h2> 
     </div> 
     <div class="modal-body"> 
      <p>TEXT TEXT TEXT TEXT</p> 
     </div> 
     <div class="modal-footer"> 
     </div> 
     </div> 
    </div>  

    <div id="modal-fc" class="modal"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <span class="close">&times;</span> 
      <h2></h2> 
     </div> 
     <div class="modal-body"> 
      <p>TEXT TEXT TEXT TEXT</p> 
     </div> 
     <div class="modal-footer"> 
     </div> 
     </div> 
    </div> 

的JavaScript

var showModal = function() { 
    var modalID = this.getAttribute("data-content"); 
    var modal = document.getElementById('modal-' + modalID); 
    modal.style.display = "block"; 
}; 

var hideModal = function() { 
    this.parentElement.parentElement.parentElement.style.display = "none"; 
} 

//event listeners to show the modals 
var buttons = document.getElementsByClassName("modal-button"); 
for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener('click', showModal, false); 
} 

//event listeners to close the modals 
var spans = document.getElementsByClassName("close"); 
for (var i = 0; i < spans.length; i++) { 
    spans[i].addEventListener('click', hideModal, false); 
}