單擊外部時我的模態沒有關閉

Question

單擊外部時，我的模態沒有關閉。 我的javascript很好，所以我認為我的問題出在我的html上，所以如果有人可以幫助找到我搞砸的地方，我將非常感激。

我試圖改變兩者以查看是否有效果，但是我並不幸運。

 // 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 on 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"; } } 

 <header> <div class="container1"> <div id="branding"> <img src="image/logo.png"> </div> <nav> <ul> <li><a href="index.html">HOME</a> </li> <button id="myBtn" class="button">ABOUT US</button> <div id="myModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h2>Welcome</h2> s </div> <div class="modal-body"> <p>We are a New York based salon and spa, stablished in 1991. We have the best professionals to meet your needs.</p> </div> <div class="modal-footer"> <img id="img" src="image/logo3.png"> </div> </div> </div> </ul> </nav> </div> </header> 

Answer 1

好的，我已經修復了，只是我的第一個按鈕（關於我們）正在工作，我對腳本進行了復制，並添加了一個類似的數字。

// 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 on 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";
   }
}


   // Get the modal
var modal2 = document.getElementById('myModal2');

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

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

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

}

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

}

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

Answer 2

您需要應用“關閉”背景，它將僅與模式事件一起顯示（隱藏和顯示）。

檢查以下代碼：

 // Get the modal var modal = document.getElementById('myModal'); var modalBG = document.getElementById('myModalClose'); // 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 on the button, open the modal btn.onclick = function() { modal.style.display = "block"; modalBG.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; modalBG.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"; modalBG.style.display = "none"; } } 

 .close{ display:none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; filter: alpha(opacity=50); opacity: .5; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav> <ul> <li><a href="index.html">HOME</a></li> <li><button id="myBtn" class="button">ABOUT US</button></div> </ul> </nav> <div id="myModalClose" class="close">sa</div> <div id="myModal" class="modal" style="width:300px"> <div class="modal-content"> <div class="modal-header"> <h2>Welcome</h2> </div> <div class="modal-body"> <p>We are a New York based salon and spa, stablished in 1991. We have the best professionals to meet your needs.</p> </div> <div class="modal-footer"> </div> </div> </div> 

現在，用戶單擊淺黑色背景，模型和該背景將消失。