我试图用以下功能实现两个非常简单的弹出窗口/模式 - 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'方法要慢 –