Search within TutorialsPark

jQuery UI : Dialogs Methods


Learn how to use jQuery UI Dialog Methods to Manipulate and Control Dialog Box.


jQuery UI : Dialog Method

jQuery UI Dialog widget comes with a rich set of methods which can be used to programmatically control and manipulate the Dialog Widget.


Table : jQuery UI Dialog Methods

Methods Description
close To close or hide the dialog Box
destroy To permanently disable the dialog box, and returning the HTML document to its original state.
isOpen To determine whether a Dialog Box is open or Not.
moveToTop To move the specified dialog box to top of the Stack
open To open the Dialog Box
option To get or set any configuration after the Dialog has been Initialized.
widget To return the outer element upon which the dialog widget is called on.

jQuery UI Dialog : Toggling the Dialog Box

The jQuery UI Dialog widget can be toggled to open and close using methods of open, isOpen and close.

In the demo below, the method isOpen is used to check is the dialog is open or not, depending on the result of if-else statement, the dialog box is either opened or closed.

Example: jQuery UI Dialog - Toggling the Dialog Box

Give it a TRY! » Note: The methods of open and close can be used to trigger any other events as well.


jQuery UI Dialogs : Retrieve Data from the Dialog

The jQuery UI Dialog Widget can pass data to and from the page, the process is simple since it is structurally a part of the page.

In the demo below, the dialog widget contains some radio buttons and texts, the program is used to get the results of the radio buttons when the dialog closes.

Example: jQuery UI Dialogs - Retrieve Data from the Dialog

Give it a TRY! » Note:The filter :checked is used to determine if the radio buttons are selected.


jQuery UI Dialog : Dialog Box Interoperability

The jQuery UI Dialog Widget can be combined with each other as well.In the demo below, the markup of accordion widget is placed within the Dialog Widget container

Example: jQuery UI Dialogs - Dialog Box Interoperability

Give it a TRY! » Note:However some combination of jQuery UI Widgets may not work as well.