jQuery UI Dialog

To provide information in a particular way on the HTML pages, the jQuery UI dialog boxes are used. It creates a basic dialog window, positioned into the viewport and protected from page content. It also holds a title bar and a content area. By default, it can be moved, resized, and closed with the ‘x’ icon.

Syntax:

The dialog() method can be used in two forms:

$(selector, context).dialog (options) Method

$(selector, context).dialog (“action”, [params]) Method

First Method: The dialog (options) Method:

To specify that an HTML element can be used in the form of a dialog box, the dialog(options) method is used. The appearance and behavior of the window are defined by the options parameter, which is an object.

Syntax:

$(selector, context).dialog(options);

Multiple options can also be used at a time using a JavaScript object. For this, they need to be separated using a comma.

Syntax:

$(selector, context).dialog({option1: value1, option2: value2..... });

The various options that can be used with this method are listed below:

Option	Uses
appendto	To restrict the UI-draggable class from being added to the list of selected DOM elements, when set to false. The default value is true.
autoopen	To open the dialog box upon creation, when set to true. The dialog box will be opened upon a call to dialog(‘open’) when set to false. The default value is true.
buttons	Add buttons in the dialog box which are listed as objects, and each property is the text on the button. Being a callback function, the value is called when the user clicks the button. The default value is {}.
closeonescape	To close the dialog box when the user presses the escape key while the dialog box has focus when set to true. The default value is true.
closetext	To provide the text to replace the default of close for the close button. The default value is “close”.
dialogclass	To restrict the UI-draggable class from being added to the list of selected dom elements, when set to false. The default value is “”.
draggable	To allow the dialog box to be draggable by clicking and dragging the title bar, when set to false. The default value is true.
height	To set the height of the dialog box. The default value is “auto”.
hide	To set the effect to be used when the dialog box is closed. The default value is null.
maxheight	To set maximum height in pixels, to which the dialog box can be resized. The default value is false.
maxwidth	To set the maximum width to which the dialog can be resized, in pixels. The default value is false.
minheight	To define the minimum height, in pixels, to which the dialog box can be resized. The default value is 150.
minwidth	To define the minimum width, in pixels, to which the dialog box can be resized. The default value is 150.
modal	To allow the dialog to have modal behavior when set to true. Also, the other items on the page will be disabled, i.e., cannot be interacted with. An overlay is created by the modal dialogs below the dialog but above other page elements. The default value is false.
position	To define the initial position of the dialog box. The value can be one of the predefined positions: center (the default), left, right, top, or bottom. It can also take a value which is a 2-element array with the left and top values (in pixels) as [left, top], or text positions such as [‘right’, ‘top’]. The default value is { my: “center”, at: “center”, of window }.
resizeable	The dialog box is resizable in all directions when set to true. The default value is true.
show	To be used as an effect which is used when the dialog box is being opened. The default value is null.
title	To define the text to appear in the title bar of the dialog box. The default value is null.
width	To define the width of the dialog box in pixels. The default value is 300.

Example 1:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:crimson;
border: 2px solid brown;
color: white;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
( "#opener" ).click(function() {
$( "#dialg" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="dialg" title="Definition: Knowledge">"The theoretical or practical understanding of a subject." </div>
<button id="opener">Dialog Box</button>
</body>
</html>

Explanation:

In the above example, we are displaying the usage of dialog functionality. Here, we are passing no parameter to the dialog() method.

Example 2:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:crimson;
border: 2px solid brown;
color: white;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
( "#opener" ).click(function() {
$( "#dialg" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="dialg" title="Dialog Title">The theoretical or practical understanding of a subject.</div>
<button id="opener">Dialog Box</button>
</body>
</html>

Explanation:

In the above example, we are displaying the usage and the behavior of the options buttons, title, and position in the dialog widget.

Example 3:\

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:crimson;
border: 2px solid brown;
color: white;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
( "#opener" ).click(function() {
$( "#dialg" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="dialg" title="Definition: Knowledge">"The theoretical or practical understanding of a subject." </div>
<button id="opener">Dialog Box</button>
</body>
</html>

Explanation:

In the above example, we display the usage and the behavior of the options hide show, and height.

Second Method: The dialog (“action”, [params]) Method:

To act on the dialog box, the dialog (action, params) method is used. It can be used to perform actions like closing the box. The first argument here is “action” which is specified as a string. One or multiple parameters can also be passed based on the given action and when required.

Syntax:

$(selector, context).dialog ("action", [params]);

The various actions that can be used with this method are listed below:

Action	Uses
close()	To close the dialog box. No argument is accepted by this method.
destroy()	To eliminate the dialog box, thus returning the element to its pre-init state. No argument is accepted by this method.
isOpen()	To check if the dialog box is open. No argument is accepted by this method.
moveToTop()	To allocate position to the corresponding dialog boxes in the foreground (on top of the others). No argument is accepted by this method.
open()	To open the dialog box. No argument is accepted by this method.
option(optionName)	To retrieve the value currently associated with the specified optionName. The name of the option to get is specified by the optionName.
option()	To retrieve an object containing key/value pairs representing the current dialog options hash. No argument is accepted by this method.
option(optionName,value)	To set the value of the dialog option associated with the specified optionName.
option( options)	To set one or more options for the dialog.
widget()	To retrieve the widget element of the dialog box; the element annotated with the ui-dialog class name. No argument is accepted by this method.

Example 4:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:crimson;
border: 2px solid brown;
color: white;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script type="text/javascript">
$(function(){
("#dialg").dialog({autoOpen: false});
});
</script>
</head>
<body>
<button id="toggle">Toggle button</button>
<div id="dialg" title="Definition: Knowledge">"The theoretical or practical understanding of a subject." </div>
</body>
</html>

Explanation:

In the above example, we are displaying the usage and the behavior of isOpen(), open(), and close() methods.

Syntax:

First Method: The dialog (options) Method:

Syntax:

Syntax:

Option

Uses

appendto

autoopen

buttons

closeonescape

closetext

dialogclass

draggable

height

hide

maxheight

maxwidth

minheight

minwidth

modal

position

resizeable

show

title

width

Second Method: The dialog (“action”, [params]) Method: