EDUCBA

Home Software Development Software Development Tutorials jQuery Tutorial jQuery UI Dialog

jQuery UI Dialog

Afshan Banu
Article byAfshan Banu
Priya Pedamkar
Reviewed byRavi Rathore

Updated April 10, 2023

jQuery UI Dialog

Introduction to jQuery UI Dialog

The jQuery UI dialog() method is used to create a dialog boxes or windows inside the page. The dialog box enhances the way to show the information to the users. It can also be used for alert, warring, errors and more. The dialog box contains title bar, content area, moved, resized and close features. So the jQuery UI dialog() method transforms the HTML code written on the page into the HTML code to display a dialog box or window.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax of jQuery UI Dialog() Method

There are two ways to use the dialog() method:

1. $(selector, context).dialog (options): This is the first method which declares the specific HTML element as a dialog box. The options parameter specifies an appearance and the behavior of the dialog box. If the options are more than one, then this method can be used and each option should be separated by using the comma.

object.$(selector, context).dialog ({opt1 : value1, opt2 : value2 ... })

2. $(selector, context).dialog (“action”, params): This is the second method which declares an html element as a dialog box and performs an action on that dialog box. The action to be performed is passing as a string like destroy, open, close the dialog box.

Parameters

Given below are the parameters:

1. options

In the first method $(selector, context).dialog(options), it accept only one parameter that is option.

There are list of possible values which we can use for the option are as follows:

  • appendTo: This option prevents the UI-draggable class to add in the list of DOM selected elements by setting it to false. The default value of it is true.
  • autoOpen: This option open dialog box when creates, by setting it to true and if it is false, the dialog box will open on calling dialog(‘open’). The default value of it is true.
  • buttons: It is used to add buttons in the dialog box, which are listed as objects and each property is the text on the button. The default value of it is {}.
  • closeOnEscape: This option close the dialog box when press the escape key and when the dialog box has focus, by set to false. The default value of it is true.
  • closeText: It contains text which replaces the default of close for the close button. The default value of it is “close”.
  • dialogClass: This option prevents the UI-draggable class to add in the list of dom selected elements, by set it to false. The default value of it is “”.
  • draggable: This option makes dialog box draggable by clicking and dragging the title bar, by set it to false. The default value of it is true.
  • height: It is used to set the dialog box height. The default value of it is “auto”.
  • hide: It is used to set the effect for closing the dialog box. The default value of it is null.
  • maxHeight: It is used to set maximum height of dialog box in pixels. The default value of it is false.
  • maxWidth: It is used to set maximum width of dialog box in pixels. The default value of it is false.
  • minHeight: It is used to set minimum height of dialog box in pixels. The default value of it is 150.
  • minWidth: It is used to set minimum width of dialog box in pixels. The default value of it is 150.
  • modal: It will have modal behavior for dialog box, other items on the page not interact. The default value of it is false.
  • position: It sets the initial position of the dialog box by using the predefined positions like center which is the default value, top, bottom, left or right or also can be an array of 2-element like [left,top ], or text position like [‘left’,’top’]. The default value of it is {my: “center”, at: “center”, of: window}.
  • resizable: It makes the dialog box resizable in all directions by set it to false. The default value of it is true.
  • show: It is used to set the effect for being opened to the dialog box. The default value of it is null.
  • title: It specifies the text to be display in the title bar of the dialog box. The default value of it is null.
  • width: It is used to set the width of the dialog box in pixel. The default value of it is 300.
2. action

In the second method $(selector, context).dialog(“action”, params), it accepts the two parameters, the action and params. The action parameter specifics the action to be performs on that dialog box.

The possible values for the action are as follows:

  • close(): It closes the dialog box. It doesn’t accept any parameters.
  • destroy(): It removes the dialog box completely and return to original state. It doesn’t accept any parameters.
  • isOpen(): It checks whether the dialog box is open or not. It doesn’t accept any parameters.
  • moveToTop(): It sets the position to the corresponding dialog boxes to the foreground which is top on the others. It doesn’t accept any parameters.
  • open(): It opens the dialog box. It doesn’t accept any parameters.
  • option(optName): It is used to get the value of the specified option as optName which is a string.
  • option(): It is used to get an current object containing key-value pairs.It doesn’t accept any parameters.
  • option(optName, value): It is used to set dialog box option of the passing optName.
  • option( options): It is used to set one or multiple dialog box options in the form of option-value pairs map.
  • widget(): It is used to get an object which contain the dialog box element. It doesn’t accept any parameters.

Examples of jQuery UI Dialog

Given below are the examples mentioned:

Example #1

Here the dialog() method is used to create the dialog box without passing any parameters to it.

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for dialog() method</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>
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:lightred;
color: lightyblue;
border: 1px solid #b9cd6d;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#d1" ).dialog();
});
</script>
</head>
<body>
<!-- HTML -->
<div id="d1" title="Oranges Benefits">"Oranges are a sweet, round citrus fruit packed with vitamins and minerals." </div>
</body>
</html><c/ode>

Output:

jQuery UI Dialog 1

Example #2

jQuery dialog() method where the dialog() method uses some of the options.

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for dialog() method</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>
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:lightred;
color: lightyblue;
border: 1px solid #b9cd6d;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#d1" ).dialog({
autoOpen: false,
resizeable: true,
buttons: {
Cancel: function() {$(this).dialog("close");},
OK: function() {$(this).dialog("close");}
},
position: {
my: "left center",
at: "left center"
},
title: "New Title",
height: 250,
width: 250,
hide: "slide",
show : "slide"
});
$( "#btn" ).click(function() {
$( "#d1" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="d1" title="Oranges Benefits">"Oranges are a sweet, round citrus fruit packed with vitamins and minerals." </div>
<button id="btn">Open dialog box to know orange benefits</button>
</body>
</html>

Output:

jQuery UI Dialog 2

Once we click on the button, the output is:

uses some of the option

Example #3

Here we write the html code to see the jQuery dialog() method where the dialog() method uses some of the actions.

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for dialog() method</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>
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:lightred;
color: lightyblue;
border: 1px solid #b9cd6d;
font-weight: bold;
}
</style>
<script>
$(function(){
$("#d1").dialog({autoOpen: true});
$("#btn").click(function() {
($("#d1").dialog("isOpen") == false) ? $("#d1").dialog("open") : $("#d1").dialog("close") ;
});
});
</script>
</head>
<body>
<div id="d1" title="Oranges Benefits">"Oranges are a sweet, round citrus fruit packed with vitamins and minerals." </div>
<button id="btn">Open dialog box to know orange benefits</button>
</body>
</html>

Output:

oranges benefits

Conclusion

The dialog boxes or windows are inside the page which pop up to give some information to the users. The dialog boxes in a page can be created by using the jQuery UI dialog() method.

Recommended Articles

This is a guide to jQuery UI Dialog. Here we discuss the introduction to jQuery UI Dialog along with appropriate syntax, parameters and respective examples. You may also have a look at the following articles to learn more –

  1. jQuery unload()
  2. jQuery mouseleave()
  3. jQuery Datepicker
  4. jQuery ready
quiz