点击模式

Question

我有这样打开的模态框。

<div class="modal-open" data-modal="modal-window-one">Modal1</div>

var btn = document.getElementsByClassName("modal-open");
for (var i = 0; i < btn.length; i++) {
var thisBtn = btn[i];
thisBtn.addEventListener("click", function(){
var modal = document.getElementById(this.dataset.modal);

modal.className = "modal-reveal";  
}, false);
}

我试图通过点击已打开的此模态之外的任何地方来关闭此模态。

这是我的代码。

window.addEventListener('mouseup', function(event){
var box = document.getElementsByClassName('modal-reveal');
if (event.target != box && event.target.parentNode != box){
    box.className = "modal-hidden"; 
}
});

我在这里做错了什么？没有控制台错误＆amp;我无法弄清楚为什么这段代码无法正常工作。

这是我的小提琴：https://jsfiddle.net/mspsys/z46woxv0/

Answer 1

您应该更改此行：

var box = document.getElementsByClassName('modal-reveal');

类似于：

var box = document.getElementsByClassName('modal-reveal')[0];

.getElementsByClassName返回HTMLCollection。你需要得到一个元素。

Answer 2

像这样更改代码

window.addEventListener('mouseup', function(event){
    var box = document.getElementsByClassName('modal-reveal');
    if (event.target != box && event.target.parentNode != box){
        box[0].className = "modal-hidden"; 
    }
});