モーダルの外側をクリックしてモーダルボックスを閉じることができません

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

私はここで間違っていますか？いいえコンソールエラー&私はこのコードが動作しない理由を理解できません。以下のようなものに

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

：

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

.getElementsByClassName戻りHTMLCollectionhttps://jsfiddle.net/mspsys/z46woxv0/

Answer 1

あなたはこの行を変更する必要があります。

は、ここに私のバイオリンです。 1つの要素を取得する必要があります。

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