Question

我有一个javascript和bootstrap模式的问题。

当用户使用鼠标离开网站并重新进入时，我想显示一个模态。

if else条件不起作用。我做错了什么？

<script>

var out=0;

if(out==1){
   $("#page").one("mouseover", function () {
     window.setTimeout(function () {
         $('#myModal').modal({show: true});
     }, 3000)
    }).on("mouseover", function () {
     return false;
    });

}

document.addEventListener("mouseover", myFunction);
document.addEventListener("mouseout", mySecondFunction);

function myFunction() {
    document.getElementById("page").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("page").innerHTML += "Moused out!<br>"
    out=1;
}

</script>

here is a plunker

Answer 1

使用mouseEnter和mouseLeave事件而不是mouseover和mouseout。

这段代码怎么样？

document.addEventListener("mouseenter", myFunction);
document.addEventListener("mouseleave", mySecondFunction);

function myFunction() {
    document.getElementById("page").innerHTML += "Moused over!<br>";
    $('#myModal').modal('hide');
}
function mySecondFunction() {
    document.getElementById("page").innerHTML += "Moused out!<br>";
    $('#myModal').modal('show');
}

https://api.jquery.com/category/events/mouse-events/

http://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

Answer 2

感谢您的支持！

我找到了一个解决方案：

<script>

var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
    if(n==1){
      window.setTimeout(function () {
              $('#myModal').modal('show');
          }, 10000)
    }

  })
  .mouseleave(function() {
    n++;
    $( "p:first", this ).text( "leavecount" + n );

  });
</script>

Plunker

离开内容时javascript打开模态并再次输入

2 个答案: