Jquery dialog modal countdown

Question

I have the following code that displays a modal box on a link click, and close the modal after 7 seconds.

I am trying to implement a countdown timer that will display the number of seconds left before the window closes within the modal. I have tried a few code snips for countdowns, but they all start counting on the page load, and don't restart until page reload. Please help! Thanks. See code working 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

Here is how you can do it:

<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>

Hope it helps