jQuery UI Library Dialog Open dialog when event occurs


Usually we want to separate the creation of the dialog from its appearance. Then three steps are needed.

  1. Create base element
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  1. Make it a dialog, note the autoOpen: false option that ensures that it will be closed at first
$( "#dialog" ).dialog({
  autoOpen: false
  1. Open it when needed, like on a button click
$( "#dialog" ).dialog( "open" );