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>

Надеюсь, это поможет