外部をクリックするとモーダルを閉じる - 複数のIDを持つ

Question

私はこのModalを私のウェブサイトの1ページに複数のリンクに使用しています。私が必要とするのは、ユーザーが外をクリックしたときにモーダルウィンドウを閉じるスクリプト/コードです。スクリプトがidを必要とするので、これは動作しますが、1つのリンクに対してのみ、このpostが見つかりました。このスクリプトを複数のIDに適用する方法はありますか？または他の方法？

Answer 1

これは、idに基づいて、それは:targetのうちの作品として、あなたは何をする必要があるか、このような別のモーダルのための一般的なクラスと異なるIDを与える、です：

window.onload = function() { 
 
    var modals = document.getElementsByClassName("modal"); 
 
    var windows = document.getElementsByClassName("window"); 
 

 
    var clearModal = function() { 
 
    location.hash = ''; 
 
    }; 
 

 
    for (var i = 0; i < modals.length; i++) { 
 
    modals[i].addEventListener('click', clearModal, false); 
 
    } 
 
    for (var i = 0; i < windows.length; i++) { 
 
    windows[i].addEventListener('click', function() { 
 
     event.stopPropagation(); 
 
     event.cancelBubble = true; 
 
    }, false); 
 
    } 
 
    document.body.addEventListener('keydown', function() { 
 
    if (event.keyCode == 27) { 
 
     location.hash = ''; 
 
     clearModal(); 
 
    } 
 
    }, false); 
 
};

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.modal { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(0,0,0,0.25); 
 
    z-index: 9999; 
 
    pointer-events: none; 
 
    opacity: 0; 
 
} 
 
.modal .window { 
 
    background-color: #fff; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 300px; 
 
    height: 200px; 
 
    margin: -100px 0 0 -150px; 
 
    text-align: center; 
 
    line-height: 120px; 
 
} 
 
.modal:target { 
 
    opacity: 1; 
 
    pointer-events: auto; 
 
}

<div id="modal-1" class="modal"> 
 
    <div class="window">Modal Window 1<br /><a href="#">Close</a></div> 
 
</div> 
 
<div id="modal-2" class="modal"> 
 
    <div class="window">Modal Window 2<br /><a href="#">Close</a></div> 
 
</div> 
 
<div id="modal-3" class="modal"> 
 
    <div class="window">Modal Window 3<br /><a href="#">Close</a></div> 
 
</div> 
 
<div id="modal-4" class="modal"> 
 
    <div class="window">Modal Window 4<br /><a href="#">Close</a></div> 
 
</div> 
 
<div id="modal-5" class="modal"> 
 
    <div class="window">Modal Window 5<br /><a href="#">Close</a></div> 
 
</div> 
 
<a href="#modal-1">Open Modal 1</a><br /> 
 
<a href="#modal-2">Open Modal 2</a><br /> 
 
<a href="#modal-3">Open Modal 3</a><br /> 
 
<a href="#modal-4">Open Modal 4</a><br /> 
 
<a href="#modal-5">Open Modal 5</a>