无法通过点击模式外部来关闭模态框

我有这种方式打开的模态框。无法通过点击模式外部来关闭模态框

<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/

来源

2016-11-20 HackYa

使用代码片段或的jsfiddle。如果他们能够运行和编辑您的代码而不复制它并粘贴到某个地方，那么其他人将更容易提供帮助。 –

这是我的小提琴。 https://jsfiddle.net/mspsys/z46woxv0/ – HackYa

你应该这行改：

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

喜欢的东西：

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

.getElementsByClassName回报HTMLCollection。你需要获得一个元素。

来源

2016-11-20 23:18:14

离开这里！是的，我知道！大声笑我很尴尬。我已经将getElementsById（）更改为getElementsByClass。我没有注意到这一点。谢谢。我现在觉得自己像个白痴。哈哈 – HackYa

改变这样的代码

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

来源

2016-11-20 23:25:46

无法通过点击模式外部来关闭模态框

回答

相关问题