Закрытие и сброс модального диалога

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>

Answer 1

Закрытие занимает пять секунд, потому что вы вызываете ту же функцию, которая содержит 5-секундный тайм-аут при нажатии кнопки закрытия:

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

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);

Использование другой функции без тайм-аута исправит this.

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>