jQuery UI Dialog

The jQuery UI dialog() widget turns a plain, hidden <div> into a draggable, resizable popup window - perfect for confirmations, alerts, and small forms - either modal (blocking the rest of the page) or non-modal (a floating window the user can ignore).

<!-- markup: any hidden div works as the dialog's content -->
<div id="dialog" title="Basic dialog">
  <p>This is the dialog's content.</p>
</div>

$('#dialog').dialog(); // jQuery UI shows it as a floating popup immediately

// don't pop up on page load; wait for the widget's .dialog('open') call
$('#dialog').dialog({
  autoOpen: false
});

// show it later, e.g. from a button click
$('#openBtn').on('click', function(){
  $('#dialog').dialog('open');
});

// a semi-transparent overlay blocks clicks on the rest of the page
// until the dialog is closed
$('#dialog').dialog({
  autoOpen: false,
  modal: true
});

$('#dialog').dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    "OK": function(){
      $(this).dialog('close');
    },
    "Cancel": function(){
      $(this).dialog('close');
    }
  }
});

$('#dialog').dialog({
  autoOpen: false,
  width: 400,
  height: 250
});

$('#dialog').dialog({
  autoOpen: false,
  open: function(event, ui){
    console.log('dialog opened');
  },
  close: function(event, ui){
    console.log('dialog closed');
  }
});