ForEach循环关闭模态

我正在尝试使用数组来打开和关闭模态，而不是每个模态都有一个变量。它适用于打开，但不适用于关闭。它遍历数组中的第一个，但不遍历其他的。具体代码在函数"closeModal.onclick"one_answers"window.onclicck"中。

JS:

'use strict';
const modalContent = [
document.querySelector("#modal-or"), 
document.querySelector("#modal-and"), 
document.querySelector("#modal-not"), 
document.querySelector("#modal-shortCircuit")];
const modal = document.querySelector(".modal");
const closeModal = document.querySelector(".closeModal");
document.querySelector("#or").onclick = function() {
modalContent[0].setAttribute('style', 'display: block;');
}
document.querySelector("#and").onclick = function() {
modalContent[1].setAttribute('style', 'display: block;');
}
document.querySelector("#not").onclick = function() {
modalContent[2].setAttribute('style', 'display: block;');
}
document.querySelector("#shortCircuit").onclick = function() {
modalContent[3].setAttribute('style', 'display: block;');
}
closeModal.onclick = function(e) {
e.stopPropagation(e);
modalContent.forEach(element => {
element.setAttribute('style', 'display: none;');
});
}
window.onclick = function(event) {
if (event.target === modal) {
modalContent.forEach(element => {
element.setAttribute('style', 'display: none;');
});
}
}

HTML:

<body>
<div class="flexLayout">
<div id="or">
<div class="modal" id="modal-or">
<div class="modal-content">
<button class="closeModal">&times;</button>
</div>
</div>
</div>
<div id="and">
<div class="modal" id="modal-and">
<div class="modal-content">
<button class="closeModal">&times;</button>
</div>
</div>
</div>
<div id="not">
<div class="modal" id="modal-not">
<div class="modal-content">
<button class="closeModal">&times;</button>
</div>
</div>
</div>
<div id="shortCircuit">
<div class="modal" id="modal-shortCircuit">
<div class="modal-content">
<button class="closeModal">&times;</button>
</div>
</div>
</div>
</div>
</body>

CSS：

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: hsl(0, 0%, 0%);
background-color: hsla(0, 0%, 0%, 0.4);
}
.modal-content {
background-color: hsl(0, 0%, 100%);
margin: 15% auto;
padding: 20px;
border: 1px solid #878787;
width: 80%;
}
.closeModal {
color: #aaa;
float: right;
font-size: 2em;
font-weight: bold;
}
.closeModal:hover, .closeModal:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

'use strict';
const modalContent = [[document.querySelector("#or"), document.querySelector("#modal-or")], 
[document.querySelector("#and"), document.querySelector("#modal-and")], 
[document.querySelector("#not"), document.querySelector("#modal-not")], 
[document.querySelector("#shortCircuit"), document.querySelector("#modal-shortCircuit")]];
const modal = document.querySelectorAll(".modal");
const closeModal = document.querySelectorAll(".closeModal");
modalContent[0][0].onclick = function() {
modalContent[0][1].setAttribute('style', 'display: block;');
}
modalContent[1][0].onclick = function() {
modalContent[1][1].setAttribute('style', 'display: block;');
}
modalContent[2][0].onclick = function() {
modalContent[2][1].setAttribute('style', 'display: block;');
}
modalContent[3][0].onclick = function() {
modalContent[3][1].setAttribute('style', 'display: block;');
}
const modalForEach = () => {
modal.forEach(element => {
element.setAttribute('style', 'display: none;');
});
}
closeModal.forEach(element => {
element.onclick = function(e) {
e.stopPropagation(e);
modalForEach();
}
});
window.onclick = function(event) {
if (event.target === modal[0] || 
event.target === modal[1] || 
event.target === modal[2] || 
event.target === modal[3]) {
modalForEach();
}
}

相关内容

最新更新

热门标签：