鼠标悬停时停止 setTimeout 引导模式

Question

我使用 Bootstrap 4 创建模态，并在后端添加 settimeout 以在 X 秒后关闭模态。

但是，如果用户没有读完该模态，这就是我的主要目标：一旦鼠标进入模态，我想停止 settimeout；如果鼠标位于模态之外，settimeout 再次工作以完成事件。

我的代码：

$(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 而不是模态，但在幕后它是相同的）