模態窗口不會關閉

Question

這是我從我前面的話題 Creating Multiple Modals on a Single Page

在下面的意見，他們都完美地工作有跟進的問題，我的假設下，我能上的工作模式圖像與按鈕元素相反，但似乎並非如此。我可以完美地打開模式，但×不會觸發模態的關閉，我不知道爲什麼。我禁用了所有附加到我的頁面的CSS，並且假設某些內容會干擾它，但是我對相同的結果感興趣，所以我有理由相信問題在JavaScript內？誰會有任何想法如何解決它？謝謝。

// Get the modal 
 
    var modal = document.getElementsByClassName('modal'); 
 

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

 

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

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

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

 
    span[1].onclick = function() { 
 
    modal[1].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"; 
 
    } 
 
    }

<div class="four columns"> 
 
    <div class="myBtn"> 
 
    <figure class="effect-zoe"> 
 
    <img src="images/sample-1.jpg" alt="img25"/> 
 
    <figcaption> 
 
    <h2>Kinetic Kids Rebrand</h2> 
 
    <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p> 
 
    </figcaption> \t \t \t 
 
    </figure> 
 

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

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
    <span class="close">×</span> 
 
    <h2>Project 1</h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
    <img src="images/sample-1.jpg" alt="img25"/> 
 
    <p>Some text in the Modal Body</p> 
 
    <p>Some other text...</p> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
       
 
       
 
    <div class="four columns"> 
 
    <div class="myBtn"> 
 
    <figure class="effect-zoe"> 
 
    <img src="images/sample-1.jpg" alt="img25"/> 
 
    <figcaption> 
 
\t \t \t \t \t 
 
    <h2>Cyber Block App</h2> 
 
    <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p> 
 
    </figcaption> \t \t \t 
 
    </figure> 
 

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

 
    <!-- Modal content --> 
 
    <div class="modal2-content"> 
 
    <div class="modal-header"> 
 
    <span class="close">×</span> 
 
    <h2>Project 2</h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
    <p>Some text in the Modal Body</p> 
 
    <p>Some other text...</p> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

你的問題是，你的跨度關閉模式是「按鈕」打開的模態的div中。

當點擊事件觸發跨度時，它也觸發父div。所以模態立即被隱藏，然後重新顯示。

爲了解決這個問題，只要確保你從DIV的模態分離按鈕的DIV：

// Get the modal 
 
var modal = document.getElementsByClassName('modal'); 
 

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

 

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

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

 
btn[1].onclick = function() { 
 
modal[1].style.display = "block"; 
 
} 
 

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

 
span[1].onclick = function() { 
 
modal[1].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"; 
 
} 
 
}

<div class="four columns"> 
 
<div class="myBtn"> 
 
    <figure class="effect-zoe"> 
 
     <img src="images/sample-1.jpg" alt="img25" /> 
 
     <figcaption> 
 
      <h2>Kinetic Kids Rebrand</h2> 
 
      <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p> 
 
     </figcaption> 
 
    </figure> 
 
</div> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <span class="close">×</span> 
 
      <h2>Project 1</h2> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <img src="images/sample-1.jpg" alt="img25" /> 
 
      <p>Some text in the Modal Body</p> 
 
      <p>Some other text...</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div> 
 

 
<div class="four columns"> 
 
<div class="myBtn"> 
 
    <figure class="effect-zoe"> 
 
     <img src="images/sample-1.jpg" alt="img25" /> 
 
     <figcaption> 
 
      <h2>Cyber Block App</h2> 
 
      <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p> 
 
     </figcaption> 
 
    </figure> 
 
</div> 
 

 
<!-- The Modal --> 
 
<div id="myModal2" class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal2-content"> 
 
     <div class="modal-header"> 
 
      <span class="close">×</span> 
 
      <h2>Project 2</h2> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the Modal Body</p> 
 
      <p>Some other text...</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>