JSFiddle - React, Tailwind, and code Playground

by Piotr Zolopa

HTML

<div id="dialog" title="Title">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed.</p>
</div>

JavaScript

$(function() {
    $("#dialog").dialog({
      modal: true,
      open: function() {
        //set #dialog to close after some milleseconds. 5000 milleseconds = 5 seconds, 300000 = 5 minutes
        setTimeout(function() {
          $("#dialog").dialog("close");
        }, 100000);
        var n = 100;
        var title = $('#dialog').dialog('option', 'title');
        console.log(title);
        var tm = setInterval(function() {
          countDown(title);
        }, 1000);
        $('#dialog').on('dialogclose', function(event) {
          clearInterval(tm);
          window.clearTimeout();
        });

        function countDown(title) {

          n--;
          if (n == 0) {
            clearInterval(tm);
          }
          $('#dialog').dialog('option', 'title', title + ': ' + Math.floor(n / 60) + ' Min ' + n % 60 + " Sec");
          console.log(n);
        }
      },
    });
  });