模态已经在工作,当您单击按钮时,它打开模式,然后单击x按钮时,它关闭了模态,但是,我尝试添加
const mainWrapper = document.querySelector(".modal-main-wrapper");
和逻辑。
我添加它的原因是因为当我单击"容器或模式外"时,它将关闭,但似乎我的模态停止工作。
那怎么了?我也试图将其瞄准身体,
const closeBody = document.querySelector("body");
,但仍无法正常工作。
const buttonClick = document.querySelector(".button-click");
const modalWrapper = document.querySelector(".modal-wrapper");
buttonClick.addEventListener("click", _ => {
modalWrapper.classList.add("modal-show");
})
const buttonClose = document.querySelector(".modal-button-close");
buttonClose.addEventListener("click", _ => {
modalWrapper.classList.remove("modal-show");
})
//The problem starts from here
const mainWrapper = document.querySelector(".modal-main-wrapper");
mainWrapper.addEventListener("click", _ => {
modalWrapper.classList.remove("modal-show");
})
.button-click {
padding: 10px 15px;
border-radius: 5px;
font-size: 40px;
color: #ffffff;
}
.modal-wrapper {
visibility: hidden;
}
.modal-wrapper.modal-show {
visibility: visible;
}
<body>
<div class="modal-main-wrapper">
<button class="button-click">Click me!</button>
<div class="modal-wrapper">
<button class="modal-button-close">x</button>
<p>Hello</p>
</div>
</div>
</body>
单击按钮时,它也会触发触发,然后单击父 modal-main-wrapper
。为了防止这种情况
stopPropagation():事件接口的方法可防止当前事件的进一步传播在捕获和冒泡阶段
const buttonClick = document.querySelector(".button-click");
const modalWrapper = document.querySelector(".modal-wrapper");
buttonClick.addEventListener("mousedown", _ => {
console.log("clicked")
modalWrapper.classList.add("modal-show");
console.log(modalWrapper.outerHTML)
_.stopPropagation()
})
const buttonClose = document.querySelector(".modal-button-close");
buttonClose.addEventListener("click", _ => {
modalWrapper.classList.remove("modal-show");
_.stopPropagation();
})
//The problem starts from here
const mainWrapper = document.querySelector(".modal-main-wrapper");
mainWrapper.addEventListener("mousedown", _ => {
console.log('clicked');
modalWrapper.classList.remove("modal-show");
})
.button-click {
padding: 10px 15px;
border-radius: 5px;
font-size: 40px;
color: #ffffff;
}
.modal-wrapper {
visibility: hidden;
}
.modal-show {
visibility: visible !important;
}
<body>
<div class="modal-main-wrapper">
<button class="button-click">Click me!</button>
<div class="modal-wrapper">
<button class="modal-button-close">x</button>
<p>Hello</p>
</div>
</div>
</body>