无法通过在模态外部单击来关闭模态框

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"; 
}
});

我在这里做错了什么？ 没有控制台错误，我不知道为什么此代码无法正常工作。

这是我的小提琴： 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"; 
    }
});