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:

Option	Description
appendto	If 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.
autoopen	If 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.
buttons	This 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 {}.
closeonescape	Unless 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.
closetext	This option contains text to replace the default of close for the close button. by default its value is "close".
dialogclass	If 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 "".
draggable	you set this option to false, dialog box will be draggable by clicking and dragging the title bar. By default its value is true.
height	This option sets the height of the dialog box. By default its value is "auto".
hide	This option is used to set the effect to be used when the dialog box is closed. By default its value is null.
maxheight	This option sets maximum height, in pixels, to which the dialog box can be resized. By default its value is false.
maxwidth	This option sets the maximum width to which the dialog can be resized, in pixels. By default its value is false.
minheight	This option is the minimum height, in pixels, to which the dialog box can be resized. By default its value is 150.
minwidth	This option is the minimum width, in pixels, to which the dialog box can be resized. By default its value is 150.
modal	If 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.
position	This 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 }.
resizeable	This option unless set to false, the dialog box is resizable in all directions. by default its value is true.
show	This option is an effect to be used when the dialog box is being opened. by default its value is null.
title	This option specifies the text to appear in the title bar of the dialog box. By default its value is null.
width	This 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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="dialog-1" title="Movie Title:Psycho (1960)">"A boy's best friend is his mother." </div>
      <button id="opener">Open Dialog</button>
   </body>
</html>

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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:lightgreen;
            border: 1px solid #b9cd6d;
            color: black;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Movie Title:Sholey",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="dialog-2" title="Dialog Title goes here...">Are O Sambha:Kitna inaam rakhi hai re sarkar hum par.</div>
      <button id="opener-2">Open Dialog</button>
   </body>
</html>

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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background: lightyellow;
            border: 1px solid #b9cd6d;
            color: black;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "slide",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="dialog-3" title="This is a title.">This is a dialog.</div>
      <button id="opener-3">Open Dialog</button>
   </body>
</html>

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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script type="text/javascript">
         $(function(){
            $("#toggle").click(function() {
		
               ($("#dialog-5").dialog("isOpen") == false) ? $("#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   <body>
      <button id="toggle">Toggle dialog!</button>
      <div id="dialog-5" title="Dialog Title!">
         Click on the Toggle button to open and cose this dialog box.
      </div>
   </body>
</html>

Test it Now

Next TopicjQuery UI Menu

← prev next →

jQuery

jQuery UI Tutorial

jQuery Interactions

jQuery Widgets

jQuery Effects

Interview Questions

jQuery UI Dialog

First Method

jQuery UI Dialog example 1

jQuery UI Dialog example 2

jQueryUI Dialog example 3

Second Method

jQuery UI Dialog example 4