Стоп setTimeout мод загрузки при наведении мыши

Question

Я бы попросил кое-что немного сложное для меня, потому что я не очень силен с JS / JQ,

я создаю модал, используя bootstrap 4, и в бэкэнд я добавляю settimeout, чтобы закрыть модал после X секунд ,

НО:

если пользователь не закончил читать этот модал, это моя главная цель ?,

Я хочу остановить settimeout , как только мышь внутри модального и снова если модальная мышь вне стороны , settime out снова работают , чтобы закончить событие

мой код:

$(function(){
    $('#mymodal').on('show.bs.modal', function(){
        var myModal = $(this);
        clearTimeout(myModal.data('hideInterval'));

        myModal.data('hideInterval', setTimeout(function(){
            myModal.modal('hide');
        }, 3000));
    });
});

Извините, что беспокою вас, но не лучше, чем вы :) ?

Answer 1

монитор при наведении курсора модального контента

$(function(){
    $('#mymodal').on('show.bs.modal', function(){
        var myModal = $(this);
        clearTimeout(myModal.data('hideInterval'));

        $('.modal-content', myModal).on('mouseover', function() {
            clearTimeout(myModal.data('hideInterval'));

        });

        $('.modal-content', myModal).on('mouseout', function() {
            myModal.data('hideInterval', setTimeout(function(){
                myModal.modal('hide');
            }, 3000));

        });

        myModal.data('hideInterval', setTimeout(function(){
            myModal.modal('hide');

        }, 3000));

    });

});

Answer 2

Используйте setInterval, чтобы увеличить время, проведенное без учета модальности:

let beforeClose;
let mouseIn=false;
const openModal = () => {
  document.querySelector('#modal').style.display='block';
  beforeClose = 100;
  let int = setInterval(() => {
    document.querySelector('#countdown').innerHTML = beforeClose;
    if (!mouseIn) beforeClose--;
    if (beforeClose==0) {
      closeModal()
      clearInterval(int);
    }
  }, 1000/24);
}
const closeModal = () => document.querySelector('#modal').style.display='none';

#modal {
  border: 1px solid black;
  display: none;
}

<button onclick="openModal()">Open modal</button>

<br>

<div id="modal" onmouseover="mouseIn=true" onmouseout="mouseIn=false">
  <p>
    Closing the modal at 0 : <span id="countdown"></span>
  </p>
  <p>
    Hover me to pause the countdown
  </p>
</div>

(я использовал div вместо модального, но под капотом тоже самое)