Event after open dialog

by Andrew Maestro

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/jquery-ui-git.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="dialog-confirm" style="display: none;">
  <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>
 
<button id="js-modal-open">Open Modal</button>

JavaScript

$(function() {
  $("#js-modal-open").click(function(){

    $("#dialog-confirm").dialog({
      resizable: false,
      height:200,
      modal: true,
      open: function() {
        $(this).parent().hide().fadeIn(function(){
        	alert('done');
        });
      },
      close: function() {
        $(this).dialog('destroy');
      }
    });
  });
});