我想使用引导程序创建退出意图模态。我在网上找到了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">×</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>
答案 0 :(得分:0)
试试这个:
document.addEventListener("mouseleave", function(e){
if( e.clientY < 0 ){
if(Number(sessionStorage.exit_init) != 1){
sessionStorage.exit_init = 1;
$("#exampleModal").modal()
}
}
}, false);
只需将“exampleModal”替换为您所称的 ID。