关闭和重置模式对话框

Question

我有一个模态创建的模态对话框，它在5秒钟后打开。然而，在我按下模式中的save("关闭按钮"(后，它也会等待5秒钟才关闭。虽然不是什么大问题，但我想知道如何自动关闭模态并重置模态的内容，以便下次按下按钮时，模态输入框为空。

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

.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.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 here </button>
<div class="modal">
<div class="modal-content">

<h1>
<label><b>Please state your confidence with this decision (0-100%)</b></label>
<p>
<input class="bottomaftertrialquestions" type="number" placeholder="Type here" name="conf1d3nce"min="0" max="100" required>
</p>
<p></h1>
<button type="button" class="close-button">SAVE</button>
</div>
</div>

Answer 1

关闭需要五秒钟，因为您正在调用相同的函数，当单击关闭按钮时，该函数包含5秒钟的超时：

function toggleModal() {
setTimeout(function() {
modal.classList.toggle("show-modal");
}, 5000)
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);

使用另一个没有超时的函数可以解决这个问题。

function toggleModal() {
setTimeout(function() {
modal.classList.toggle("show-modal");
}, 5000)
}
function closeModalNow() {
modal.classList.toggle("show-modal");
// clear selection
document.querySelector('input[name="conf1d3nce"]').value = null;
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", closeModalNow);

演示：

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
setTimeout(function() {
modal.classList.toggle("show-modal");
}, 5000)
}
function closeModalNow() {
modal.classList.toggle("show-modal");
document.querySelector('input[name="conf1d3nce"]').value = null;
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", closeModalNow);

.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.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 here </button>
<div class="modal">
<div class="modal-content">

<h1>
<label><b>Please state your confidence with this decision (0-100%)</b></label>
<p>
<input class="bottomaftertrialquestions" type="number" placeholder="Type here" name="conf1d3nce"min="0" max="100" required>
</p>
<p></h1>
<button type="button" class="close-button">SAVE</button>
</div>
</div>