Как установить таймер для модального диалога, который появляется при нажатии кнопки - PullRequest
Новая
       17

Как установить таймер для модального диалога, который появляется при нажатии кнопки

0 голосов
/ 07 марта 2020

Привет, у меня есть кнопка включения. Когда я нажимаю эту кнопку onclick, через 5 секунд должно появиться модальное диалоговое окно (5000 миллисекунд). Однако через 5 секунд модальное окно закрывается и повторно появляется через 5, как если бы оно было зациклено. Все выглядит хорошо с кодом, но я не знаю, где я иду не так.

Что я хочу:

1) Когда нажата кнопка мыши, через 5 секунд открывается модальное диалоговое окно. Модал не должен закрываться, если кто-то не нажмет кнопку сохранения. 2) При нажатии кнопки «Сохранить» модальное диалоговое окно закрывается и сбрасывается. 3) Модальный диалог не открывается снова. Он открывается только через 5 секунд после нажатия кнопки.

Надеюсь, это понятно.

Любая помощь будет оценена 

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

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

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>

. Я не уверен, что не так с моим кодом, чтобы заставить его работать

Ответы [ 2 ]

0 голосов
/ 07 марта 2020

вы должны попробовать это 

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>
0 голосов
/ 07 марта 2020

Вы сами вызываете l oop с помощью этой функции: 

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

Это определяет функцию с именем toggleModal, которая выполняет две функции:

1) расписаний toggleModal для запуска через 5 секунд 2) переключает класс show-modal.

1) здесь важная вещь: функция планирует себя запускаться через 5 секунд, каждый раз, когда она запускается - тем самым обеспечивая что при вызове один раз он будет вызываться каждые 5 секунд с этого момента.

Так что не планируйте ту же функцию в setTimeout, а запланируйте желаемый эффект - переключение учебный класс. Это проще всего сделать с помощью анонимной функции: 

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