关闭模态窗口，点击模态外的任何地方

当模态本身的关闭按钮被点击时，我的模态弹出窗口关闭，但当用户单击窗口中的任何位置时，我希望它们关闭。我有这个JavaScript在那里至今：关闭模态窗口，点击模态外的任何地方

var span = document.getElementsByClassName("close"); 
var btn = document.getElementsByClassName("click-to-open"); 
var modal=document.getElementById("modal-window-4"); 

for (var i = 0; i < btn.length; i++) { 
    var thisBtn = btn[i]; 
     thisBtn.addEventListener("click", function(){ 
     var modal = document.getElementById(this.dataset.modal); 
     modal.style.display = "block"; 
    }, false); 

} 

for (var j = 0; j < span.length; j++) { 
    var closeThis = span[j]; 
     closeThis.addEventListener("click", function(){ 
     var closeModal = document.getElementById(this.dataset.modal); 
     closeModal.style.display = "none"; 
    }, false); 
} 



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

Codepen这里：http://codepen.io/FelixB/pen/QyOpoo

其他职位在这里处理jQuery的，但我已经有了这已经打算在直线上升的JavaScript，所以我希望有人知道一个简单的方法来实现这一点。

来源

2016-01-18 Felix B

我使用body onload事件来初始化其余的事件处理程序。一旦面板可见，我就设置点击处理程序。它似乎对我来说很好。

   function init() { 
        var span = document.getElementsByClassName("close"); 
        var btn = document.getElementsByClassName("click-to-open"); 
        var modal = document.getElementById("modal-window-4"); 

        for (var i = 0; i < btn.length; i++) { 
         var thisBtn = btn[i]; 
         thisBtn.addEventListener("click", function() { 
          var modal = document.getElementById(this.dataset.modal); 
          modal.style.display = "block"; 
          modal.addEventListener("click", function() { modal.style.display = "none"; modal.removeEventListener("click"); }); 
         }, false); 

        } 

       }

和HTML

 <body onload="init()"> 
     <!-- and the rest of your code --> 
     </body>

来源

2016-01-19 00:44:09 Bindrid

这一工程！谢谢：） –

关闭模态窗口，点击模态外的任何地方

回答

相关问题