jQuery UI Dialog Plugin

Filed Under: jQuery

We will discuss about the jQuery UI Dialog plugin in this post. The jQuery UI Dialog plugin is used for displaying information, which contains a dialog title and a content area. We can move, resize or close the dialog window.

The jQuery UI provides different options, methods and events to customize the Dialog plugin. We will see these techniques in the following sections.

Contents

Dialog Plugin Options

In this section, we will discuss about different options available to customize the jQueryUI Dialog plugin. We have used many of these options in the Dialog Plugin in Action section.

Options Syntax Drscription
appendTo $( “.selector” ).dialog({ appendTo: “#someElem” }); This option is used to append an element to the dialog.
autoOpen $( “.selector” ).dialog({ autoOpen: false }); Setting this to true makes the dialog box open on initialization.
buttons $( “.selector” ).dialog({ buttons: [ { text: “Ok”, click: function() { $( this ).dialog( “close” ); } } ] }); This option is used to specify the button displayed on the dialog box.
closeOnEscape $( “.selector” ).dialog({ closeOnEscape: false }); If it is set to true, the dialog box will close on pressing the escape key.
closeText $( “.selector” ).dialog({ closeText: “hide” }); Text displayed for the close button
dialogClass $( “.selector” ).dialog({ dialogClass: “alert” }); Used for additional theming of the dialog box.
draggable $( “.selector” ).dialog({ draggable: false }); The dialog will be draggable by the title bar if it is set to true.
height $( “.selector” ).dialog({ height: 400 }); Specifies the height of the dialog box.
hide $( “.selector” ).dialog({ hide: { effect: “explode”, duration: 1000 } }); This option is used to animate the dialog box.
maxHeight $( “.selector” ).dialog({ maxHeight: 600 }); Specifies the maximum height to which the dialog box can be resized.
maxWidth $( “.selector” ).dialog({ maxWidth: 600 }); Specifies the maximum width to which the dialog box can be resized.
minHeight $( “.selector” ).dialog({ minHeight: 200 }); Specifies the minimum height to which the dialog box can be resized.
minWidth $( “.selector” ).dialog({ minWidth: 200 }); Specifies the minimum width to which the dialog box can be resized.
modal $( “.selector” ).dialog({ modal: true }); Setting to true gives a modal behaviour.
position $( “.selector” ).dialog({ position: { my: “left top”, at: “left bottom”, of: button } }); Specifies the position of the dialog box.
resizable $( “.selector” ).dialog({ resizable: false }); Set to true makes the dialog box resizable.
show $( “.selector” ).dialog({ show: { effect: “blind”, duration: 800 } }); Used to animate the dialog box.
title $( “.selector” ).dialog({ title: “Dialog Title” }); Specifies the title of the dialog.
width $( “.selector” ).dialog({ width: 500 }); Specifies the width of the dialog.

The above table briefly describes the options used to customize the Dialog plugin.

Dialog Plugin Methods

In this section, we will look into the jQueryUI Dialog plugin methods and its usage. These methods are very useful when you deal with the Dialog plugin.

Methods Usage Description
close $( “.selector” ).dialog( “close” ); Used to close the dialog.
destroy() $( “.selector” ).dialog( “destroy” ); Used to remove the functionality completely.
instance() $( “.selector” ).dialog( “instance” ); Used to get the dialog’s instance object.
isOpen() $( “.selector” ).dialog( “isOpen” ); Check if the dialog is open.
moveToTop() $( “.selector” ).dialog( “moveToTop” ); This method is used to move the dialog box to the top.
open() $( “.selector” ).dialog( “open” ); This method is used to open the dialog.
option( optionName, value ) $( “.selector” ).dialog( “option”, “disabled”, true ); Used to the set the value of the dialog option associated with the optionName.
widget() $( “.selector” ).dialog( “widget” ); This method will return a jQuery object of the dialog.

The above table briefly describes the methods used to customize the Dialog plugin.

Dialog Plugin Events

In this section, we will discuss about different events associated with jQueryUI Dialog plugin and its usage.

Events Usage Description
beforeClose( event, ui ) $( “.selector” ).dialog({,beforeClose: function( event, ui ) {}}); This event is fire when the dialog is about to close.
close( event, ui ) $( “.selector” ).dialog({,close: function( event, ui ) {}}); Fired when the dialog is closed.
create( event, ui ) $( “.selector” ).dialog({,create: function( event, ui ) {}}); This event is fired when the dialog is created.
drag( event, ui ) $( “.selector” ).dialog({,drag: function( event, ui ) {}}); Fired when the dialog is being dragged
dragStart( event, ui ) $( “.selector” ).dialog({,dragStart: function( event, ui ) {}}); Fired when the user starts dragging the dialog.
dragStop( event, ui ) $( “.selector” ).dialog({,dragStop: function( event, ui ) {}}); Fired when the dragging is stopped.
focus( event, ui ) $( “.selector” ).dialog({,focus: function( event, ui ) {}}); Fired when the dialog is focused.
open( event, ui ) $( “.selector” ).dialog({,open: function( event, ui ) {}}); Fired when the dialog box is opened.
resize( event, ui ) $( “.selector” ).dialog({,resize: function( event, ui ) {}}); Fired when the user resize the dialog.
resizeStart( event, ui ) $( “.selector” ).dialog({,resizeStart: function( event, ui ) {}}); Fired when the user starts resizing the dialog.
resizeStop( event, ui ) $( “.selector” ).dialog({,resizeStop: function( event, ui ) {}}); Fired when the user stops resizing the dialog window.

The above table briefly describes the events associated with the Dialog plugin.

Dialog Plugin in Action

In this section, we will try different examples to explore the uses of jQueryUI Dialog plugin. You will get a basic idea about the dialog plugin customization with available options, methods and events.

Default Functionality

The following example demonstrates the default functionality of jQuery UI Dialog plugin

dialog-default.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Dialog - Default Functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
         $(function() {
            $( "#dialog" ).dialog({
               autoOpen: false,  
            });
            $( "#openbtn" ).click(function() {
               $( "#dialog" ).dialog( "open" );
            });
         });
   </script>

   </head>
   <body> 
      <div style="font-size: 12px" id="dialog" title="Dialog Demo"> 
         <p>Demonstrates the use of autoOpen option and open() method in the jQueryUI dialog plugin.</p>
      </div>
      <button id="openbtn">Open Dialog</button>
   </body>
</html>

You will see the following output on the browser.

Use of autoOpen option and open()

The following example demonstrates the use of autOpen option and open() method in jQuery UI Dialog plugin. In this example, we set the autOpen option to false. The dialog box opens only when you click on the button.

dialog-open.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Dialog</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
         $(function() {
            $( "#dialog" ).dialog({
               autoOpen: false,  
            });
            $( "#openbtn" ).click(function() {
               $( "#dialog" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body> 
      <div style="font-size: 12px" id="dialog" title="Dialog Demo"> 
         <p>Demonstrates the use of autoOpen option and open() method in the jQueryUI dialog plugin.</p>
      </div>
      <button id="openbtn">Open Dialog</button>
   </body>
</html>

You will see a dialog box with title “Dialog Demo”, when you click on the button.

Use of hide and show option to animate the Dialog box

The following example demonstrates how to animate the dialog box with show and hide options.

dialog-animate.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Dialog</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>  <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "slideDown",
        duration: 500
      },
      hide: {
        effect: "explode",
        duration: 500
      }
    });
 
    $( "#openbtn" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
</script>
</head>
<body>
 
<div style="font-size: 12px;"id="dialog" title="Animate Dialog Demo">
  <p>This example demonstrates the animation of dialog box using hide and show options. The dialog box can be moved, resized or closed. </p>
</div>
    <button id="openbtn">Open Dialog</button>
</body>
</html>

You will see the following output on the browser.

That’s all for now and you will see more jQuery plugins in the coming posts.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages