需要为模型弹出窗口添加延迟(纯JS)

Question

如何为弹出窗口添加延迟。。。我尝试了几次隔离，但没有成功，实现以下模型延迟的诀窍是什么。

提前感谢

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

<button class="trigger">Click the modal!</button>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Hello, I am a modal!</h1>
</div>
</div>

感谢

Answer 1

您可以使用css转换延迟属性。

这是指南

Answer 2

您可以使用setTimeout方法添加延迟

它采用一种方法和以毫秒为单位的延迟作为setTimeout(functionRef, delay)。

---

以下是将模式延迟1s 的示例

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
setTimeout(() => {
modal.classList.toggle("show-modal");
}, 1000)

}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

.modal {
opacity: 0
}
.show-modal {
opacity: 1!important;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

<button class="trigger">Click the modal!</button>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Hello, I am a modal!</h1>
</div>
</div>

Answer 3

延迟是通过超时实现的

function toggleModalDelayed() {
setTimeout(()=>{
modal.classList.toggle("show-modal");
}, milliseconds)
}