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

OR

$(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 in 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 To 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 in 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() {  
            $( "#dialg" ).dialog({  
               autoOpen: false,    
            });  
            $( "#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>

Output 1:

Output 2:

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() {  
            $( "#dialg" ).dialog({  
               autoOpen: false,   
               buttons: {  
                  OK: function() {$(this).dialog("close");}  
               },  
               title: "Definition: Knowledge",  
               position: {  
                  my: "left center",  
                  at: "left center"  
               }  
            });  
            $( "#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>

Output 1:

Output 2:

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() {  
            $( "#dialg" ).dialog({  
               autoOpen: false,   
               hide: "slide",  
               show : "slide",  
               height: 150        
            });  
            $( "#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>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying 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 params 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 completely, thus returning the element back 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 to 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(){  
            $("#toggle").click(function() {  
 
               ($("#dialg").dialog("isOpen") == false) ? $("#dialg").dialog("open") : $("#dialg").dialog("close") ;  
            });  
            $("#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>

Output 1:

Output 2:

Explanation:

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

Please Share