gpt4 book ai didi

javascript - 单击模态之外的任意位置关闭模态窗口

转载 作者:行者123 更新时间:2023-11-28 06:29:03 25 4
gpt4 key购买 nike

当单击模式本身中的关闭按钮时,我的模式弹出窗口将关闭,但我希望它们在用户单击窗口中的任意位置时关闭。到目前为止我已经有了这个 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 实现了这一点,所以我希望有人知道实现这一点的简单方法。

最佳答案

我使用 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>

关于javascript - 单击模态之外的任意位置关闭模态窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34866068/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com