Jquery 对话框模式倒计时

Question

我有以下代码，它在 link 单击时显示模态框，并在 7 秒后关闭模态框。

我正在尝试实现一个倒数计时器，它将显示 window 在模态中关闭之前剩余的秒数。我已经尝试了一些倒计时代码片段，但它们都开始计算页面加载，并且在页面重新加载之前不会重新启动。请帮忙！谢谢。查看代码工作 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>

希望对您有所帮助

Jquery 对话框模式倒计时

Jquery dialog modal countdown

jquery

dialog

modal-dialog

jquery-ui-dialog