Search within TutorialsPark

jQuery UI : Dialogs


Learn how to use jQuery UI Dialogs


jQuery UI : Dialog Widget

jQuery UI Dialog widget is used to display a brief messages to the user, or put a question to the user(using alert or confirm)

The dialog widget can also be used to display supplemental content like images or any other interactive content(say forms).You can even add buttons like OK and Cancel


jQuery UI Dialog: Creating a Basic Dialog

jQuery UI Dialog Widget can be created easily with minimal markups, use a div element and then call the method dialog.

The div element must have a title attribute, this value is displayed in the title bar of the dialog box, other contents of the div serve as the content of the dialog box.

Example: jQuery UI Dialogs - Creating a Basic Dialog

Give it a TRY! » Note: The dialog box has no setting, hence it appears as soon as the page is loaded.


jQuery UI Dialogs: Enabling and Disabling Tabs

The jQuery UI Dialog widget provides a rich set setting options which allow you to customize the dialog box displayed to the user.

Table : jQuery UI AutoComplete Settings

Options Description
appendTo To specify which element the dialog should be appended to. Default is body Element.
autoOpen If set as true, the dialog box is displayed as soon as it is created. Default Value is true
buttons To specifiy the button sets to be added to the dialog box, and the functions to be invoked when the buttons are clicked.
closeOnEscape When set to true, the dialog box can be closed on pressing the ESC button.
dialogClass To set additional classnames of the dialog box, for theming purposes.
draggable To make the Dialog Box draggable. Default Value is true
height To set the initial height of the dialog. Default Value is auto
hide To set the animation to be used while hiding the dialog box.
maxHeight To set the maximum Height(in px) of the dialog box, default is false i.e no maximum height.
maxWidth To set the maximum width(in px) of the dialog box, default is false i.e no maximum width.
minHeight To set the minimum height(in px) of the dialog box, default is false i.e no minimum height.
minWidth To set the minimum width(in px) of the dialog box, default is false i.e no minimum width.
modal When set to true the dialog box is converted to a Modal. Default value is false
position To set the initial position of the Dialog Box. Default is center
resizeable When set to truem the dialog is displayed with a drag handle to resize the dialog. Default is true
show To specify the animation effect used to show the dialog box.Default value is null
title To set the title of the Dialog
width To set the inital width of the Dialog Popup. Default value is 300px.

jQuery UI Dialog : Showing the Dialog Box

The jQuery UI Dialog widget is either show to user as soon as the page loads or we can also use a trigger to open the dialog box

The setting autoOpen is set to true by default, so the dialog is displayed as soon as the page is loaded. To disable this feature set the value to false

Example: jQuery UI Dialog - Showing the Dialog Box

Give it a TRY! » Note: To show the dialog box, set the value to autoOpen to true(default Value)


jQuery UI Dialogs : Setting the Title of Dialog

The jQuery UI Dialog widget provides a title option to control how the title is displayed on the dialog popup.It can be made selectable by setting the value of draggable to false

The title text by default is displayed in plain text, but that can be overrided by using the style class .ui-dialog-title.

Example: jQuery UI Dialogs - Setting the Title of Dialog

Give it a TRY! » Note:You can even apply other custom styles by using the CSS style rules.


jQuery UI Dialog : Setting the Position of Dialog Box

The jQuery UI Dialog position settings can be used to specify the position on the screen where the Dialog can be Located.The default position is center

Table : jQuery UI AutoComplete Settings

Options Description
string A single string value, possible values are left, right, top and bottom
[number, number] If two element array specifying the x, y co-ordinates with top left being the reference.
[string, string] A two element array, specifying the x and y position strings.

Example: jQuery UI Dialogs - Position Settings of Dialog

Give it a TRY! » Note:The x-position must be specified first and then the y-position.


jQuery UI Dialogs : Adding Buttons

The jQuery UI dialog widget can be added with Buttons to using setting buttons. This setting has an array of object as values, and each of those has properties of text and click

The demo below has two buttons, the OK button can have a callback function, and the cancel button is used to close the Dialog, in addition to the close icon button on the top

Example: jQuery UI Dialog - Adding Buttons

Give it a TRY! » Note: The variable this within cancel function to reference the div element used to create Dialog.


jQuery UI Dialogs : Adding Icons to Dialog Buttons

The jQuery UI Dialog widget Buttons can be provided with Icons inorder to provide users with a visual assistance for buttons.

In the demo below, we have specified the text, icons and the action that should follow when the button is clicked.

Example: jQuery UI Dialogs - Adding Icons to Dialog Buttons

Give it a TRY! » Note: The icons are styled based on the themes used.


jQuery UI Dialogs : Adding Dialog Animations

The jQuery UI dialog widget can be provided with built-in animation effects while opening and closing of dialog boxes, using methods of show and hide.

In the demo below, we set the hide and show options to Boolean value of true , it reduces the dialog's size and opacity until it disappears gracefully.

Example: jQuery UI Dialogs - Adding Dialog Animation

Give it a TRY! » Note: The type of animation can also be specified, using a string to specify the name of effect.


jQuery UI Dialogs : Setting the Dimensions

The jQuery UI dialog widget has several options to set the size of the dialog box, and also the minimum and maximum size it can be resized to.

In the demo below, the width and height option set the initial dimensions of the dialog box, while the min-height and max-height option sets how small or large it can be resized respectively.

Example: jQuery UI Dialogs - Setting the Dimensions

Give it a TRY! » Note: A good webdevelopment practice is to not manipulate the dialog Box.


jQuery UI Dialogs : Setting the Stacking Order i.e Z-index

The jQuery UI Dialog widgets can be stacked one above another using the z-index Setting using CSS style rules.

In the demo, we have two dialog elements with different id and title attribute.The second dialog which has the higher z-index value gets the focus.

Example: jQuery UI Dialogs - Set the Stacking Order i.e Z-index

Give it a TRY! » Note: Clicking on the first box, will the focus on first box.


jQuery UI Dialogs : Creating Modals

The jQuery UI Dialog Modals are used to prevent the user from interacting with the elements within the document until the dialog is closed.

To create a modal set the value of the modal setting to true, the overlay is removed as soon as the dialog modal is closed

Example: jQuery UI Dialogs - Set the Modality Option

Give it a TRY! » Note: The advantage of this feature is that the dialog is closed before the underlying features get interactive again.