Contribute
JQuery

JQueryUI - Day 9 (Dialog)

Before reading this article, I highly recommend reading the previous part of the series:

jQuery Dialog opens content in an interactive overlay. Dialog boxes are one of the nicest ways of presenting information on an HTML page. We can define dialog as a floating window with a title and content that can be moved in any direction or may be resized.

Syntax:

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

Or

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

Example:

  1. <!DOCTYPEhtml>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function()  
  17.                        {  
  18.   
  19.                         $("#dialog-1").dialog({  
  20.   
  21.                             autoOpen: false,  
  22.   
  23.                             buttons: [  
  24.   
  25.                                 {  
  26.   
  27.                                     text: "Ok",  
  28.   
  29.                                     icons:  
  30.                                   {  
  31.   
  32.                                         primary: " ui-icon-mail-closed"  
  33.   
  34.                                     },  
  35.   
  36.                                     click: function() {  
  37.   
  38.                                         $(this).dialog("close");  
  39.   
  40.                                     }  
  41.   
  42.                                 }  
  43.   
  44.                             ]  
  45.   
  46.                         });  
  47.   
  48.                         $("#show").click(function()   
  49.                           {  
  50.   
  51.                             $("#dialog-1").dialog("open");  
  52.   
  53.                         });  
  54.   
  55.                     });  
  56.                 </script>  
  57.   
  58.                 <style>  
  59.                     #datepicker-1 {  
  60.                         margin-top: 20px;  
  61.                     }  
  62.                      
  63.                     #div1 {  
  64.                         background-color: coral;  
  65.                         color: ButtonHighlight;  
  66.                         font-size: 30px;  
  67.                         height: 450px;  
  68.                         width: 1000px;  
  69.                         text-align: center;  
  70.                         margin-left: 150px  
  71.                     }  
  72.                      
  73.                     #show {  
  74.                         font-size: 20px;  
  75.                         background-color: #14E058  
  76.                     }  
  77.                 </style>  
  78.   
  79.                 </head>  
  80.   
  81.                 <body>  
  82.   
  83.                     <div id="div1">  
  84.   
  85.                         <span>************Dialog*************</span>  
  86.   
  87.                         <div class="ui-widget">  
  88.   
  89.                             <div id="dialog-1">  
  90.   
  91.                                 <h1>Dialog Box</h1>  
  92.                                 <br/>  
  93.   
  94.                                 <span>This is a simple dialog Example</span>  
  95.   
  96.                                 </div>  
  97.   
  98.                                 <input id="show" type="button" value="Show Dialog" "/>  
  99.   
  100. </div>  
  101.   
  102. </div>  
  103.   
  104. </body>  
  105.   
  106. </html>  

Output:

output

Options:

Option

Description

Example

autoOpen

If set to true, the dialog will automatically open upon initialization. When false, the dialog box will be opened upon a call to dialog('open'). By default its value is true.

$("#dialog-1").dialog({

autoOpen: false

});

button

Specifies which buttons should be displayed on the dialog. These are listed as objects, and each property is the text on the button.

$("#dialog-1").dialog({

buttons: [

{

text: "Ok",

icons: {

primary: " ui-icon-mail-closed"

},

click: function () {

$(this).dialog("close");

}

}

]

});

closeOnEscape

Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key.

$("#dialog-1").dialog({

closeOnEscape: false

});

closeText

Specifies the text for the close button.

$("#dialog-1").dialog({

closeText:"Close"

});

dialogClass

The specified class name(s) will be added to the dialog, for additional theming.

$("#dialog-1").dialog({

dialogClass: "alert"

});

draggable

If set to false dialog box will not be draggable by clicking and dragging the title bar.

$("#dialog-1").dialog({

draggable: false

});

height

The height of the dialog.

$("#dialog-1").dialog({

height: 300

});

hide

This option is used to set the effect to be used when the dialog box is closed. By default its value is null.

$("#dialog-1").dialog({

hide: { effect:"explode", duration: 1300 }

});

maxHeight

The maximum height to which the dialog can be resized.

$("#dialog-1").dialog({

maxHeight: 400

});

maxWidth

The maximum width to which the dialog can be resized.

$("#dialog-1").dialog({

maxWidth: 400

});

minHeight

The minimum height to which the dialog can be resized.

$("#dialog-1").dialog({

minHeight: 600

});

minWidth

The minimum width to which the dialog can be resized

$("#dialog-1").dialog({

minWidth: 600

});

modal

If this option is set to true the dialog will have modal behavior and other items on the page will be disabled.

$("#dialog-1").dialog({

modal:true

});

position

Specifies where the dialog should be displayed when opened. Default value is { my: "center", at: "center", of: window }

$("#dialog-1").dialog({

position:{ my: "center", at:"center", of: window }

});

resizable

If set to true then dialog box can be resized. By default its value is true.

$("#dialog-1").dialog({

resizable: false

});

show

Define If and how to animate the showing of the dialog. By default its value is null.

$("#dialog-1").dialog({

show: { effect: "blind", duration: 500 }

});

title

Specifies the title of the dialog.

$("#dialog-1").dialog({

title: "Dialog Box"

});

width

The width of the dialog in pixels.

$("#dialog-1").dialog({

width:400

});

Methods:

Method

Description

Example

close()

Closes the dialog.

$("#dialog-1").dialog("close");

destroy()

Removes the dialog functionality completely. This will return the element back to its pre-init state.

$("#dialog-1").dialog("destroy");

instance()

Retrieves the dialog's instance object.

Varobj=$("#dialog-1").dialog("instance");

isOpen()

Check whether the dialog is currently open.

Varobj=$("#dialog-1").dialog("isOpen");

moveToTop()

Moves the dialog to the top of the dialog stack.

$("#dialog-1").dialog("moveToTop");

open()

Opens the dialog.

$("#dialog-1").dialog("open");

option(option_Name)

Gets the value currently associated with the specifiedoptionName.

Varobj=$("#dialog-1").dialog("maxHeight");

option()

Gets an object containing key/value pairs representing the current dialog options

Varobj=$("#dialog-1").dialog();

option(option_name,value)

Sets the value of the dialog option associated with the specified optionName.

Varobj=$("#dialog-1").dialog("maxHeight",100);

widget()

Returns a jQuery object of dialog()

$("#dialog-1").dialog("widget");

Events:

Event

Description

Example

beforeClose(event,ui)

Event triggered when a dialog is about to close. If canceled, the dialog will not close

$("#dialog-1").dialog({

beforeClose: function (event, ui) {

}});

close(event,ui)

Event triggered when the dialog is closed.

$("#dialog-1").dialog({

close: function (event, ui) {

}});

create(event,ui)

Event triggered when the dialog is closed.

$("#dialog-1").dialog({

create: function (event, ui) {

}});

drag(event,ui)

Event triggered while the dialog is being dragged.

$("#dialog-1").dialog({

drag: function (event, ui) {

}});

dragStart(event,ui)

Event triggered when the user starts dragging the dialog.

$("#dialog-1").dialog({

dragStart: function (event, ui) {

}});

dragStop(event,ui)

Event triggered after the dialog has been dragged.

$("#dialog-1").dialog({

dragStop: function (event, ui) {

}});

focus(event,ui)

Event triggered when the dialog gains focus.

$("#dialog-1").dialog({

focus: function (event, ui) {

}});

open(event,ui)

Event triggered when the dialog is opened.

$("#dialog-1").dialog({

open: function (event, ui) {

}});

resize(event,ui)

Event is triggered repeatedly as a dialog box is resized.

$("#dialog-1").dialog({

resize: function (event, ui) {

}});

resizeStart(event,ui)

Event is triggered when a resize of the dialog box start.

$("#dialog-1").dialog({

resizeStart: function (event, ui) {

}});

resizeStop(event,ui)

Event is triggered when a resize of the dialog box terminates.

$("#dialog-1").dialog({

resizeStop: function (event, ui) {

}});

Let us take some example.

Example 1:

  1. <!DOCTYPE html>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#dialog-1").dialog({  
  19.   
  20.                             autoOpen: false,  
  21.   
  22.                             show: "puff",  
  23.   
  24.                             hide: "slide",  
  25.   
  26.                             closeOnEscape: false,  
  27.   
  28.                             title: "Hello!"  
  29.   
  30.                         });  
  31.   
  32.                         $("#show").click(function() {  
  33.   
  34.                             $("#dialog-1").dialog("open");  
  35.   
  36.                         })  
  37.   
  38.                     });  
  39.                 </script>  
  40.   
  41.                 <style>  
  42.                     #datepicker-1 {  
  43.                         margin-top: 20px;  
  44.                     }  
  45.                      
  46.                     #div1 {  
  47.                         background-color: coral;  
  48.                         color: ButtonHighlight;  
  49.                         font-size: 30px;  
  50.                         height: 450px;  
  51.                         width: 1000px;  
  52.                         text-align: center;  
  53.                         margin-left: 150px  
  54.                     }  
  55.                      
  56.                     #show {  
  57.                         font-size: 20px;  
  58.                         background-color: #14E058  
  59.                     }  
  60.                 </style>  
  61.   
  62.                 </head>  
  63.   
  64.                 <body>  
  65.   
  66.                     <divid="div1">  
  67.   
  68.                         <span>************Dialog*************</span>  
  69.   
  70.                         <divclass="ui-widget">  
  71.   
  72.                             <divid="dialog-1">  
  73.   
  74.                                 <h1>Dialog Box</h1>  
  75.                                 <br/>  
  76.   
  77.                                 <span>This is a simple dialog Example</span>  
  78.   
  79.                                 </div>  
  80.   
  81.                                 <inputid="show" type="button" value="Show Dialog" "/>  
  82.   
  83.                 </div>  
  84.   
  85.             </div>  
  86.   
  87.         </body>  
  88.   
  89. </html>  

Output:

output

When we click on “Show Dialog” button , a dialog box will be visible. The title of the dialog box is “Hello!” and the dialog box is visible in “puff” animation style. When we click on the cross button this dialog box become closed with slide animation effect.

Example 2:

  1. <!DOCTYPE html>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#dialog-1").dialog({  
  19.   
  20.                             autoOpen: false,  
  21.   
  22.                             show: "puff",  
  23.   
  24.                             hide: "slide",  
  25.   
  26.                             closeOnEscape: false,  
  27.   
  28.                             title: "Hello!",  
  29.   
  30.                             height: 400,  
  31.   
  32.                             width: 400,  
  33.   
  34.                             buttons: [  
  35.   
  36.                                 {  
  37.   
  38.                                     text: "Ok",  
  39.   
  40.                                     icons: {  
  41.   
  42.                                         primary: " ui-icon-mail-closed"  
  43.   
  44.                                     },  
  45.   
  46.                                     click: function() {  
  47.   
  48.                                         $(this).dialog("close");  
  49.   
  50.                                     }  
  51.   
  52.                                 }  
  53.   
  54.                             ]  
  55.   
  56.                         });  
  57.   
  58.                         $("#ui-datepicker-year").datepicker({  
  59.   
  60.                             autoSize: true,  
  61.   
  62.                             showOn: "button",  
  63.   
  64.                             buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif",  
  65.   
  66.                             changeMonth: true  
  67.   
  68.                         });  
  69.   
  70.                         $("#show").click(function() {  
  71.   
  72.                             $("#dialog-1").dialog("open");  
  73.   
  74.                         })  
  75.   
  76.                     });  
  77.                 </script>  
  78.   
  79.                 <style>  
  80.                     #datepicker-1 {  
  81.                         margin-top: 20px;  
  82.                     }  
  83.                      
  84.                     #div1 {  
  85.                         background-color: coral;  
  86.                         color: ButtonHighlight;  
  87.                         font-size: 30px;  
  88.                         height: 450px;  
  89.                         width: 1000px;  
  90.                         text-align: center;  
  91.                         margin-left: 150px  
  92.                     }  
  93.                      
  94.                     #show {  
  95.                         font-size: 20px;  
  96.                         background-color: #14E058  
  97.                     }  
  98.                 </style>  
  99.   
  100.                 </head>  
  101.   
  102.                 <body>  
  103.   
  104.                     <div id="div1">  
  105.   
  106.                         <span>************Dialog*************</span>  
  107.   
  108.                         <div  class="ui-widget">  
  109.   
  110.                             <divid="dialog-1">  
  111.   
  112.                                 <h1>Select Date</h1>  
  113.                                 <br/>  
  114.   
  115.                                 <div class="ui-widget">  
  116.   
  117.                                     <input type="text" id="ui-datepicker-year" />  
  118.   
  119.                                     </div>  
  120.   
  121.                                     </div>  
  122.   
  123.                                     <input id="show" type="button" value="Show Dialog" "/>  
  124.   
  125.                         </div>  
  126.   
  127.                     </div>  
  128.   
  129.             </body>  
  130.   
  131. </html>  

Output:

output

In the above example we are displaying a datepicker in dialog box. We also define a button for the dialog box and we defined the text and icon for this button. When we click on this button the dialog box will be closed.

Example 3:

  1. <!DOCTYPE html>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         var States = [  
  19.   
  20.                             {  
  21.                                 label: "Andra Pradesh",  
  22.                                 value: "ANP",  
  23.                                 desc: "Capital is Hyderabad"  
  24.                             },  
  25.   
  26.                             {  
  27.                                 label: "Arunachal Pradesh",  
  28.                                 value: "ARP",  
  29.                                 desc: "Capital is Itangar"  
  30.                             },  
  31.   
  32.                             {  
  33.                                 label: "Bihar",  
  34.                                 value: "BIH",  
  35.                                 desc: "Capital is Patna"  
  36.                             },  
  37.   
  38.                             {  
  39.                                 label: "Chhattisgarh",  
  40.                                 value: "CHT",  
  41.                                 desc: "Capital is Raipur"  
  42.                             },  
  43.   
  44.                             {  
  45.                                 label: "Goa",  
  46.                                 value: "GOA",  
  47.                                 desc: "Capital is Panaji"  
  48.                             },  
  49.   
  50.                             {  
  51.                                 label: "Haryana",  
  52.                                 value: "HAR",  
  53.                                 desc: "Chandigarh"  
  54.                             },  
  55.   
  56.                             {  
  57.                                 label: "Jammu and Kashmir",  
  58.                                 value: "JAK",  
  59.                                 desc: "Srinagar and Jammu"  
  60.                             },  
  61.   
  62.                             {  
  63.                                 label: "Kerala",  
  64.                                 value: "KRL",  
  65.                                 desc: "Capital is Thiruvananthapuram"  
  66.                             },  
  67.   
  68.                             {  
  69.                                 label: "Mizoram",  
  70.                                 value: "MIZ",  
  71.                                 desc: "Capital is Aizawi"  
  72.                             },  
  73.   
  74.                             {  
  75.                                 label: "Rajasthan",  
  76.                                 value: "RAJ",  
  77.                                 desc: "Capital is Jaipur"  
  78.                             },  
  79.   
  80.                             {  
  81.                                 label: "Sikkim",  
  82.                                 value: "SKM",  
  83.                                 desc: "Capital is Gangtok"  
  84.                             },  
  85.   
  86.                             {  
  87.                                 label: "Uttaranchal",  
  88.                                 value: "UTH",  
  89.                                 desc: "Capital is Dehradun"  
  90.                             },  
  91.   
  92.                             {  
  93.                                 label: "West Bengal",  
  94.                                 value: "WGL",  
  95.                                 desc: "Capital is Kolkata"  
  96.                             },  
  97.   
  98.                         ];  
  99.   
  100.                         $("#dialog-1").dialog({  
  101.   
  102.                             autoOpen: false,  
  103.   
  104.                             show: "puff",  
  105.   
  106.                             hide: "slide",  
  107.   
  108.                             closeOnEscape: false,  
  109.   
  110.                             title: "Hello!",  
  111.   
  112.                             height: 400,  
  113.   
  114.                             width: 400,  
  115.   
  116.                             buttons: [  
  117.   
  118.                                 {  
  119.   
  120.                                     text: "Ok",  
  121.   
  122.                                     icons: {  
  123.   
  124.                                         primary: " ui-icon-mail-closed"  
  125.   
  126.                                     },  
  127.   
  128.                                     click: function() {  
  129.   
  130.                                         $(this).dialog("close");  
  131.   
  132.                                     }  
  133.   
  134.                                 }  
  135.   
  136.                             ]  
  137.   
  138.                         });  
  139.   
  140.                         $("#ui-datepicker-year").datepicker({  
  141.   
  142.                             autoSize: true,  
  143.   
  144.                             showOn: "button",  
  145.   
  146.                             buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif",  
  147.   
  148.                             changeMonth: true  
  149.   
  150.                         });  
  151.   
  152.                         $("#show").click(function() {  
  153.   
  154.                             $("#dialog-1").dialog("open");  
  155.   
  156.                         })  
  157.   
  158.                         $("#automplete-1").autocomplete({  
  159.   
  160.                             source: States,  
  161.   
  162.                             autoFocus: true,  
  163.   
  164.                             minLength: 2,  
  165.   
  166.                             delay: 400,  
  167.   
  168.                             position: {  
  169.                                 my: "right top",  
  170.                                 at: "right bottom",  
  171.                                 collision: "none"  
  172.                             },  
  173.   
  174.                             focus: function(event, ui) {  
  175.   
  176.                                 $("#automplete-1").val(ui.item.value);  
  177.   
  178.                             },  
  179.   
  180.                             select: function(event, ui) {  
  181.   
  182.                                 $("#automplete-1").val(ui.item.value);  
  183.   
  184.                                 $("#auto_id").val(ui.item.label);  
  185.   
  186.                                 returnfalse;  
  187.   
  188.                             }  
  189.   
  190.                         })  
  191.   
  192.                         .data("ui-autocomplete")._renderItem = function(ul, item) {  
  193.   
  194.                             return $("<li>").append("<a>" + item.label + "<br>" + "<i style=\"color:#1ACE26\">" + item.desc + "</i>" + "</a>")  
  195.   
  196.                             .appendTo(ul);  
  197.   
  198.                         };  
  199.   
  200.                     });  
  201.                 </script>  
  202.   
  203.                 <style>  
  204.                     #datepicker-1 {  
  205.                         margin-top: 20px;  
  206.                     }  
  207.                      
  208.                     #div1 {  
  209.                         background-color: coral;  
  210.                         color: ButtonHighlight;  
  211.                         font-size: 30px;  
  212.                         height: 450px;  
  213.                         width: 1000px;  
  214.                         text-align: center;  
  215.                         margin-left: 150px  
  216.                     }  
  217.                      
  218.                     #show {  
  219.                         font-size: 20px;  
  220.                         background-color: #14E058  
  221.                     }  
  222.                      
  223.                     #automplete-1 {  
  224.                         margin-left: 120px  
  225.                     }  
  226.                 </style>  
  227.   
  228.                 </head>  
  229.   
  230.                 <body>  
  231.   
  232.                     <div id="div1">  
  233.   
  234.                         <span>************Dialog*************</span>  
  235.   
  236.                         <div class="ui-widget">  
  237.   
  238.                             <div id="dialog-1">  
  239.   
  240.                                 <h1>Select State</h1>  
  241.                                 <br/>  
  242.   
  243.                                 <div class="ui-widget">  
  244.   
  245.                                     <input type="text" id="automplete-1" />  
  246.   
  247.                                     <input type="hidden" id="auto_id">  
  248.   
  249.                                         </div>  
  250.   
  251.                                         </div>  
  252.   
  253.                                         <input id="show" type="button" value="Show Dialog" "/>  
  254.   
  255.                             </div>  
  256.   
  257.                     </div>  
  258.   
  259.         </body>  
  260.   
  261. </html>  

Output:

output

In above example we are showing  autocomplete in dialog box.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs