The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Dialog widget is a part of jQuery UI; it allows you to display content inside a floating window which has a title bar, content area, button bar, drag handle and close button; and it can be moved, resized and closed. The following examples demonstrate some advance uses of the dialog widget.
- Modal Dialog with Buttons
- Open Dialog on Click
- Hide the Close Button/Title Bar
- Change Dialog Position
- Load Content via AJAX
- Size to Fit Content
Modal Dialog with Buttons
To create a basic dialog, simply call the .dialog() method on a div. The jQuery UI framework will convert the div into a modeless dialog. To create a modal dialog instead, set modal option to true (a modal dialog prevents interaction with the rest of the page while it is active). You can also specify the buttons option to specify the buttons which should be displayed on the dialog. The following example shows how to create a modal dialog with Yes/No buttons:
Open Dialog on Click
By default, the dialog opens automatically upon initialization. In order to initialize a dialog without opening it, set the autoOpen property to false. To open a dialog that is hidden or closed, call the open() method. To close a dialog using script, call the close() method. Here is an example of how to initialize a dialog on page load and open it on a button click:
Hide the Close Button/Title Bar
The jQuery UI framework does not provide the option for hiding the title bar or close button but you can use CSS for this. The title bar has the class ui-dialog-titlebar and the close button has the class ui-dialog-titlebar-close. You can write CSS to target these classes and hide them. To target the title bar or close button of a specific dialog, consider adding a class to the dialog markup using dialogClass. In the following example, there are two dialogs on the same page. CSS classes and rules are used to hide the close button of the first dialog and title bar of the other:
Adding dialog classes can also help you style the dialogs individually.
Change Dialog Position
By default, a dialog positions itself in the center of the window. But you can change that using the position option (read more about the jQuery UI position API). This option allows you to position the dialog with respect to another element or mouse event. The following example shows you how to align a dialog with the bottom right corner of the window:
Load Content via AJAX
This is fairly straight forward: use the jQuery AJAX methods to load the content in an empty div (then create a dialog) or an existing dialog (then call the open() method if necessary).
The following example uses a single dialog and recycles it to display various content loaded asynchronously via AJAX. The dialog is initialized once and its content are overwritten for each AJAX request.
Size to Fit Content
By default, the dialog has fixed width and auto height, which means that the dialog will display horizontal scroll bar for wide content and stretch vertically for tall content. If you want to display images or videos in a dialog using img, video or iframe tags, you could set the width option to pixel value or auto. For auto width, the dialog will stretch horizontally to accommodate the content provided that the content has defined width.
In the following example, the dialog is used to display images with different dimensions:
