Question

我会问些难事，因为我对JS / JQ不太了解，

我使用引导程序4创建模态，在后端中，我添加settimeout以在X秒后关闭

但是：

如果用户没有阅读完该模式，则 这是我的主要目标 ，

我想在模式中的鼠标后再次停止设置超时 如果鼠标外边模式，则重新设置超时工作以完成事件

我的代码：

$(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

使用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而不是模式，但实际上是相同的）

Answer 2

监视鼠标的模态内容

category    subcategory
a               f

在鼠标悬停时停止setTimeout引导程序模态

2 个答案: