退出意图 Bootstrap 模态

Question

我想使用 bootstrap 创建一个退出意图模式。我在网上找到了一个 JavaScript 代码，现在我想将它连接到 Bootstrap 模态。

我从网上找到的代码：

function onMouseOut(event) {
  // If the mouse is near the top of the window, show the popup
  // Also, do NOT trigger when hovering or clicking on selects
  if (
    event.clientY < 50 &&
    event.relatedTarget == null &&
    event.target.nodeName.toLowerCase() !== 'select') {
    // Remove this event listener
    document.removeEventListener("mouseout", onMouseOut);

    // Show the popup
    document.getElementById("popup").style.display = "block";
  }
}

document.addEventListener("mouseout", onMouseOut);

Bootstrap 模态：

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

试试这个：

document.addEventListener("mouseleave", function(e){
  if( e.clientY < 0 ){
    if(Number(sessionStorage.exit_init) != 1){
        sessionStorage.exit_init = 1;
        $("#exampleModal").modal()
    }
  }
}, false);

只需将 'exampleModal' 替换为您所称的 ID。

来源：https://github.com/bilalucar/exit-intent-popup

退出意图 Bootstrap 模态

Exit-intent Bootstrap Modal

javascript

bootstrap-modal