javascript - 关闭和重置模态对话框

Question

我有一个模态创建的模态对话框，在 5 秒后打开。但是，在我按下模式内的保存（“关闭按钮”）后，它也会等待 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>

标签： javascriptbuttononclickmodal-dialogreset

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>