jQuery UI Library 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" );