無法通過點擊模式外部來關閉模態框

我有這種方式打開的模態框。無法通過點擊模式外部來關閉模態框

<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

無法通過點擊模式外部來關閉模態框

回答

相關問題