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 DialogGive 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
|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 BoxGive 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 DialogGive 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
|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 DialogGive 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 ButtonsGive 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 ButtonsGive 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 AnimationGive 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 DimensionsGive 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-indexGive 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