jQuery UI Dialog

The dialog boxes are used to present information in a nice way on the HTML pages. The jQuery UI dialog method is used to create a basic dialog window which is positioned into the viewport and protected from page content. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.

Syntax:

You can use the dialog ()method in two forms:

First Method

The dialog(options) method specifies that you can use an HTML element in the form of a dialog box. Here, options parameter is an object that specifies the appearance and behavior of that window.

Syntax:

You can use one or more options at a time using JavaScript object. In the case of more than one options, you must have to separate them using a comma as follows:

Following is a list of different options that can be used with this method:

OptionDescription
appendtoIf you set this option to false, it will prevent the UI-draggable class from being added in the list of selected DOM elements. By default its value is true.
autoopenIf you set this option to true, the dialog box is opened upon creation. when false, the dialog box will be opened upon a call to dialog('open'). By default its value is true.
buttonsThis option adds buttons in the dialog box. These are listed as objects, and each property is the text on the button. The value is a callback function called when the user clicks the button. By default its value is {}.
closeonescapeUnless you set this option to false, the dialog box will be closed when the user presses the escape key while the dialog box has focus. By default its value is true.
closetextThis option contains text to replace the default of close for the close button. by default its value is "close".
dialogclassIf you set this option to false, it will prevent the UI-draggable class from being added in the list of selected dom elements. By default its value is "".
draggableyou set this option to false, dialog box will be draggable by clicking and dragging the title bar. By default its value is true.
heightThis option sets the height of the dialog box. By default its value is "auto".
hideThis option is used to set the effect to be used when the dialog box is closed. By default its value is null.
maxheightThis option sets maximum height, in pixels, to which the dialog box can be resized. By default its value is false.
maxwidthThis option sets the maximum width to which the dialog can be resized, in pixels. By default its value is false.
minheightThis option is the minimum height, in pixels, to which the dialog box can be resized. By default its value is 150.
minwidthThis option is the minimum width, in pixels, to which the dialog box can be resized. By default its value is 150.
modalIf this option is set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. modal dialogs create an overlay below the dialog but above other page elements. By default its value is false.
positionThis option specifies the initial position of the dialog box. can be one of the predefined positions: center (the default), left, right, top, or bottom. can also be a 2-element array with the left and top values (in pixels) as [left,top], or text positions such as ['right','top']. by default its value is { my: "center", at: "center", of: window }.
resizeableThis option unless set to false, the dialog box is resizable in all directions. by default its value is true.
showThis option is an effect to be used when the dialog box is being opened. by default its value is null.
titleThis option specifies the text to appear in the title bar of the dialog box. By default its value is null.
widthThis option specifies the width of the dialog box in pixels. By default its value is 300.

jQuery UI Dialog example 1

Let's take a simple example to demonstrate the usage of dialog functionality passing no parameter to the dialog() method.

Test it Now

jQuery UI Dialog example 2

Use of buttons, title and position:

Let's take an example to demonstrate the usage of three options buttons, title and position in the dialog widget.

Test it Now

jQueryUI Dialog example 3

Use of hide, show and height:

Let's take an example to demonstrate the usage of these options hide, show and height.

Test it Now

Second Method

The dialog (action, params) method is used to perform an action on the dialog box, such as closing the box. The action is specified as a string in the first argument and optionally, you can use one or more params one or more params based on the given action.

Syntax:

Following is a list of actions that are used with this method:

Action
Description
close()This action is used to close the dialog box. This method does not accept any arguments.
destroy()This action is used to removes the dialog box completely. This will return the element back to its pre-init state. This method does not accept any arguments.
isOpen()This action is used to check if the dialog box is open. This method does not accept any arguments.
moveToTop()This action is used to allocate position to the corresponding dialog boxes to the foreground (on top of the others). This method does not accept any arguments.
open()This action is used to opens the dialog box. This method does not accept any arguments.
option(optionName)this action gets the value currently associated with the specified optionName. where optionName is the name of the option to get.
option()This action gets an object containing key/value pairs representing the current dialog options hash. This method does not accept any arguments.
option(optionName,value)This action sets the value of the dialog option associated with the specified optionName.
option( options)This action sets one or more options for the dialog.
widget()This action is used to return the dialog box?s widget element; the element annotated with the ui-dialog class name. This method does not accept any arguments.

jQuery UI Dialog example 4

Let's take a simple example to demonstrate the use of isOpen(), open() and close() method.

Test it Now
Next TopicjQuery UI Menu




Latest Courses