我試圖用以下功能實現兩個非常簡單的彈出窗口/模式 - 1.單擊一個按鈕將打開相應的彈出窗口。 2.一旦彈出窗口處於活動狀態,單擊屏幕上的任意位置將關閉彈出窗口。 3.點擊「X」將關閉彈出窗口。javascript中關閉邏輯的彈出窗口/模式
我能夠實現點1和2。然而提到的目標,我無法實現點3
HTML -
<button id="myBtn1">Open Modal 1</button>
<div id="myModal1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in first Modal</p>
</div>
</div>
<button id="myBtn2">Open Modal 2</button>
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in second modal</p>
</div>
</div>
JS - 這顯然是不正確的:
var modal1 = document.getElementById('myModal1');
var btn1 = document.getElementById("myBtn1");
var modal2 = document.getElementById('myModal2');
var btn2 = document.getElementById("myBtn2");
var span = document.getElementsByClassName("close")[0];
btn1.onclick = function() {
modal1.style.display = "block";
}
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
}
span.onclick = function() {
modal1.style.display = "none";
}
請在這裏找到我的代碼 - https://jsfiddle.net/23bL2w9L/
注意 - 我無法以任何方式更改HTML代碼。只有Javascript應該被修改。
在此先感謝
只是要小心,不能過度使用'querySelectorAll'比'getElementsByClassName'方法要慢 –