JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<input type="button" value="confirm"/><br/>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<div id="log"></div>

CSS

body {font-size:12px}

JavaScript

var dialogOpen = false;

  $(function() {
      
      window.setInterval(function(){myFunc()}, 1000);
      
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      autoOpen: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      open: function( event, ui ) {dialogOpen = true;},
      close: function( event, ui ) {dialogOpen = false;}
    });
      
      $('input').click(function() {
          $( "#dialog-confirm" ).dialog( "open" );
      });
      
  });

function myFunc() {
    if(!dialogOpen) {
        $('#log').append('interval passed...<br/>');
    }
}