2016-12-14 76 views
1

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

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

缺少了什麼嗎?

+0

你能提供一個工作的例子嗎? –

+0

@AnnaJeanine這裏的工作示例: [鏈接](http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2) –

回答

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

Worked喜歡魅力,做得很好。非常感謝你。 –