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
|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 BoxGive 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 DialogGive 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