當我在外面單擊時，為什么我的js模式沒有關閉？

Question

我正在嘗試創建一個照相館，在其中可以單擊圖片以顯示描述該圖片的模式。 關閉按鈕可以工作，但是，我需要能夠在背景上單擊外部以關閉模式。 我有以下代碼：

 function stylemodals() { var modalarray = document.body.getElementsByClassName("modal"); for (var i = 0; i < modalarray.length; i++) { modalarray[i].setAttribute("style", "display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; color:black; overflow: auto; background-color: rgba(0, 0, 0, .4);"); } } stylemodals(); function stylemodalcontent() { var modalcontentarray = document.body.getElementsByClassName("modal-content"); for (var i = 0; i < modalcontentarray.length; i++) { modalcontentarray[i].setAttribute("style", "background-color: #FFFFFF; margin: 15 % auto; border: 1 px solid #888;width: 70%;"); } } stylemodalcontent(); //set 1 var mdl1 = document.getElementById('mdl1'); var btn1 = document.getElementById("btn1"); var close1 = document.getElementById("close1"); btn1.onclick = function() { mdl1.style.display = "block"; }; close1.onclick = function() { mdl1.style.display = "none"; }; window.onclick = function(event) { if (event.target == mdl1) { mdl1.style.display = "none"; } }; 

 <table> <tr> <td> <!-- Trigger/Open The Modal NEEDS AN IMAGE --> <input type="image" src="" alt="ib-image" id="btn1"> <!-- The Modal --> <div id="mdl1" class="modal"> <!-- Modal content NEEDS CONTENT--> <div class="modal-content"> <span id="close1" style="color: rgb(31, 31, 31); float: right; font-size: 28px; font-weight: bold;">&times;</span> <p>CONTENT</p> </div> </div> </td> </tr> </table> 

我一直在研究如何執行此操作，我從w3schools復制並粘貼了此內容，然后根據需要對其進行了修改，但仍然無法在模式外部單擊以關閉它。 我該怎么做呢？

- 編輯 -

這是新代碼：

 var modal = document.getElementById("modal"); modal.setAttribute("style", "display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; color: black; overflow: auto; background-color: rgba(0, 0, 0, .4); "); document.getElementById("modal-content").setAttribute("style", "background-color: #FFFFFF; margin: 15% auto; border: 1px solid #888; width: 70%;"); var actualmodalcontent = document.getElementById("actual-modal-content"); function modal1 (){ actualmodalcontent.innerHTML = "CONTENT1" modal.style.display = "block"; }; var close = document.getElementById("close"); window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } if (event.target == close) { modal.style.display = "none"; } }; 

 <div id="modal"> <div id="modal-content"> <span id="close" onclick="close()" style="color: rgb(31, 31, 31); float: right; font-size: 28px; font-weight: bold;">&times;</span> <p id="actual-modal-content"> CONTENT0 </p> </div> </div> <input type="image" src="" alt="ib-image" id="btn1" onclick="modal1()"> 

Answer 1

window.onclick = function(event) {
  if (event.target == mdl1) {
    mdl1.style.display = "none";
  }
};

如果人們准確地單擊了模態而不是在模態外部，則該部分代碼會將模態顯示設置為無。 因此，您需要使用event.target !== mdl1 && !mdl1.contains( event.target )來檢測對頁面上不是模態本身或其任何子代的任何元素的點擊。 https://developer.mozilla.org/en-US/docs/Web/API/Node/contains

請記住，您可能只想在實際打開模式后將關閉處理程序添加到窗口中，然后在關閉模式后將其刪除。 這樣，您可以防止頁面針對可能甚至無法呈現的模式觸發多個onclick事件。

Answer 2

我檢查了您的網站，您的整個問題是因為您有很多模型，並且您在窗口對象上注冊了10多個不同的單擊事件，實際上將被注冊的唯一單擊事件是最后一個，其余的僅覆蓋每個其他。

每當你這樣做

window.onclick = function() {};
// Or
window['onclick'] = function() {};

您正在做的只是簡單地分配給對象的屬性，該對象就是窗口對象。

解決您問題的最佳方法是制作一個模型並根據用戶單擊的按鈕修改其內容。