Using jQuery UI Dialog Widget Example

Updated on September 29, 2015     Kisan Patel

jQuery UI provides you with the ability to easily create dialogs (modal and non-modal dialogs).

A dialog is created from a <div> element having a title attribute representing the title of the window.

<div id="dialog" title="Simple dialog window">
  <p>Welcome on StudyOverflow.com</p>
  <p>This is the default dialog. The dialog window can be moced, resized and closed with 'x' icon.</p>
</div>

Next, using jQuery UI, we can quickly turn this <div> element into a basic non-modal dialog:

$(’#dialog’).dialog();

Here, you can specify many options (such as height, width, if the dialog is modal or not, the position of the dialog, etc.

$("#dialog").dialog({
   title: "Confirmation with options",
   resizable: false,
   height: '100px',
   width: '150px'
});

Another type of dialog that is often use is the modal dialog, which is used to get confirmation from the user before performing some action or you can embed form in model.

$("#dialog").dialog({
    title: "Delete Confirmation",
    modal: true,
    buttons: {
          "Yes": function () {
               $(this).dialog("close"); // v5
               alert("You clicked on yes");
           },
           "No": function () {
               $(this).dialog("close");
               alert("You clicked on no");
           }
    }
});

You can close the model by invoke the close method:

$('#dialog').dialog( "close" );

Or you can open the model using the open method. For example, you want to open the model on the click of button.

$('#dialog').dialog( "open" );