jQuery对话框模态倒数

Question

我有以下代码，在单击链接时显示一个模式框，然后在7秒钟后关闭该模式。

我正在尝试实现一个倒数计时器，该倒数计时器将显示模式关闭窗口之前剩余的秒数。我已经尝试了一些用于倒计时的代码片段，但是它们都开始计数页面加载，并且直到页面重新加载后才重新启动。请帮忙！谢谢。参见代码工作https://codepen.io/shane8johnson/pen/GRpNdOR

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $(".msg").click(function () {
            $("#dialog").dialog({
                modal: true,
                title: "Success",
               width: 400,
                height: 200,
                open: function (event, ui) {
                    setTimeout(function () {
                        $("#dialog").dialog("close");
                    }, 7000);
                }
            });
        });
    });
</script>

  <div id="dialog" style="display: none">
    This is a message 
  <br>
    This message will auto-close in NUMBER seconds.
</div>

<a class="msg" href="#na">Open Dialog Box</a>

Answer 1

这是您的操作方式：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">

    $(function () {
        $(".msg").click(function () {
            $("#dialog").dialog({
                modal: true,
                title: "Success",
               width: 400,
                height: 200,
                open: function (event, ui) {
                  //set initial time
                  var init_time = 7;
                  $("#number").html(init_time);
                  //start count
                  setTimeout(countDown,1000);  
                  //function count
                  function countDown(){
                      init_time--;
                      $("#number").html(init_time);
                       if(init_time > 0){
                          setTimeout(countDown,1000);
                       } else {
                         setTimeout(function(){
                           $("#dialog").dialog("close");
                         }, 500);
                       }                     
                  }
                }
            });
        });
    });
</script>

  <div id="dialog" style="display: none">
    This is a message 
  <br>
    This message will auto-close in <span id="number">NUMBER</span> seconds.
</div>

<a class="msg" href="#na">Open Dialog Box</a>

希望有帮助