关闭modals以外任何位置的模态窗口
关闭modals以外任何位置的模态窗口
提问于 2016-01-18 23:34:14
当模式本身中的“关闭”按钮被单击时，我的模式弹出窗口就会关闭，但是当用户单击窗口中的任何位置时，我希望它们关闭。到目前为止，这里有一个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";
}
}在这里：http://codepen.io/FelixB/pen/QyOpoo
这里的其他帖子都是关于jQuery的，但是我已经把它写成了直接的javascript，所以我希望有人知道实现这个目标的简单方法。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-19 00:44:09
我使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34866068
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号