如何设置计时器以显示警报消息并将该警报消息与另一个警报消息重叠？

Question

I've written a following script to show the alert message when the mouse-pointer is away from the browser page's content. 我编写了以下脚本，当鼠标指针离开浏览器页面的内容时显示警报消息。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $(document).mouseleave(function() { 
        alert("your mouse is away"); 
      });
    });
    </script>
  </head>
  <body>

  <h1>My first PHP program</h1>
  <p>Hello World!</p>

  </body>
</html>

Now what I want to achieve is when the alert message from above script gets displayed, a timer should get started. 现在我要实现的是，当显示上述脚本的警报消息时，应该启动一个计时器。 When the time of five seconds passes and till then if user doesn't click on the Ok button of the displayed alert box another alert box should appear over this alert message saying "Your time has been finished". 经过五秒钟的时间后，如果用户没有单击显示的警报框的“确定”按钮，则该警报消息上将出现另一个警报框，提示“您的时间已结束”。 But when the first alert box displays, timer gets started and user clicks ok button before completion of five seconds then the second alert box should not get displayed and the timer again should initialize to zero seconds. 但是，当显示第一个警报框时，计时器将启动，并且用户在五秒内完成之前单击“确定”按钮，则不应显示第二个警报框，并且计时器应再次初始化为零秒。 Can anyone help me in this regard, please? 有人可以在这方面帮助我吗？ Any kind of help or suggestion will be highly appreciated and accepted. 任何帮助或建议都将受到高度赞赏和接受。 Waiting for your replies. 等待您的回复。 Thanks for spending some of your valuable time to understand my question. 感谢您花费您宝贵的时间来理解我的问题。

Answer 1

try this code, 试试这个代码，

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">   </script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
</script>
<script>
    var timer;
    $(document).ready(function () {
        $(document).mouseleave(function () {
            customAlert("your mouse is away");

        });
    });

    function customAlert(customText) {
        $("#popUp").html(customText);
        timer = setInterval(customAlert2, 5000)

        $("#popUp").dialog({
            dialogClass: "no-close",
            buttons: [{
                text: "OK", click: function () {
                    $(this).dialog("close");
                    clearInterval(timer);
                }
            }]

        });

    }

    function customAlert2() {
        $("#popUp2").dialog({
            dialogClass: "no-close",
            buttons: [{
                text: "OK", click: function () {
                    $(this).dialog("close");
                }
            }]

        });

    }


 </script>
 </head>
 <body>

<h1>My first PHP program</h1>
<p>Hello World!</p>
<div id="popUp"></div>
<div id="popUp2">your time is over</div>

 </body>
</html>

如何设置计时器以显示警报消息并将该警报消息与另一个警报消息重叠？

问题描述

1 个解决方案

解决方案1
0 2013-12-02 06:14:56

如何设置计时器以显示警报消息并将该警报消息与另一个警报消息重叠？

问题描述

1 个解决方案

解决方案1 0 2013-12-02 06:14:56

解决方案1
0 2013-12-02 06:14:56