Question

我在一个页面上有多个模态的javascript事件处理程序。目标是在用户单击外部模态时关闭该框。

在一个页面上最多可能有4个模态，有些有2个，有些有3个。当我有一个包含所有4个模态的页面时，此功能可以正常工作。问题来自于我只有2或3.该功能可能适用于第一个框，但不会为第3个框启动。

无论页面上有什么模态，我都需要这个。

document.onclick = function(event) {
if (event.target == modal || event.target == modal2 || event.target == modal3 || event.target == modal4) {
event.target.style.display = "none";
}
}

https://jsfiddle.net/fastgrowingtrees/w3bo9q29/

Answer 1

尝试这样的事情。每次创建或删除模态时，从模态数组中删除其id。由于所有模态的处理方式相同，您只需循环遍历它们，而无需再次复制粘贴init代码。

这里的关键是使用id而不是实际元素，因为在原始代码中，当你添加或删除模态时，你还必须编辑document.onclick函数。

   var modals = ["myModal_1", "myModal_2", "myModal_3", "myModal_4"];
    modals.forEach(function( id, index ) {
        var modal = document.getElementById(id),
            btn = document.getElementById('m' + id.slice(3)),
            span = document.getElementsByClassName("close")[index];
        btn.onclick = function() {
            modal.style.display = "block";
        }
        span.onclick = function() {
            modal.style.display = "none";
        }   
    });
    document.onclick = function(event) {
        if (modals.indexOf(event.target.id) !== -1) {
            event.target.style.display = "none";
        }
    }

Answer 2

步骤：

设置

<div id="modal">Modal</div>
...
<div id="modal4">Modal 4</div>

检查IF声明如下：

document.onclick = function(event) {
var x=event.target.getAttribute("id");
if ( x == 'modal' || x == 'modal2' || x == 'modal3' || x == 'modal4') {
event.target.style.display = "none";
}
}

Javascript事件处理程序多个目标

2 个答案: