ポップアップボックスが同時に開いている

Question

画像をクリックすると、選択した画像に関する情報を含むポップアップボックスが開きますが、すべてのポップアップボックスが同時に開きます。ここで何が不足しています

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

：これは、スクリプトがどのように見えるかで、最後に

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

： 開始するには、私は私が箱を持って、その後いくつかの

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

がありますか？

Answer 1

がありますが、質問に言及していないそのうちのいくつかは、あなたのコードにはいくつかの問題、ですが、とにかく明白です：

1）あなたのすべてのモーダル内容は「myModal」と呼ばれる1つのdivの範囲内にあります。ボタンをクリックすると、このdivが表示されます。したがって、その中のすべてのコンテンツが表示されます。クリックされたボタンに適用可能なモーダルコンテンツのみを開く必要があります。

2）すべてのボタンに同じidがあります。これは無効なHTMLです。要素IDは一意でなければなりません。それが起きると、最初のボタンだけがclickイベントに応答します。他の要素は、無効な要素とみなされるため無視されます。

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); 
}