jQuery UI Dialog Plugin With Examples [Latest]

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.

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” ).dialo g({ 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


&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Dialog - Default Functionality&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
         $(function() {
            $( "#dialog" ).dialog({
               autoOpen: false,
            });
            $( "#openbtn" ).click(function() {
               $( "#dialog" ).dialog( "open" );
            });
         });
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div style="font-size: 12px" id="dialog" title="Dialog Demo"&gt;
         &lt;p&gt;Demonstrates the use of autoOpen option and open() method in the jQueryUI dialog plugin.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button id="openbtn"&gt;Open Dialog&lt;/button&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQuery UI Dialog - Default Functionality</title>

$(function() {

$( "#dialog" ).dialog({

autoOpen: false,

});

$( "#openbtn" ).click(function() {

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

});

</script>

</head>

<body>

<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


&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Dialog&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
         $(function() {
            $( "#dialog" ).dialog({
               autoOpen: false,
            });
            $( "#openbtn" ).click(function() {
               $( "#dialog" ).dialog( "open" );
            });
         });
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div style="font-size: 12px" id="dialog" title="Dialog Demo"&gt;
         &lt;p&gt;Demonstrates the use of autoOpen option and open() method in the jQueryUI dialog plugin.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button id="openbtn"&gt;Open Dialog&lt;/button&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQuery UI Dialog</title>

$(function() {

$( "#dialog" ).dialog({

autoOpen: false,

});

$( "#openbtn" ).click(function() {

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

});

</script>

</head>

<body>

<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


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

<!doctype html>

<html>

<head>

<title>jQuery UI Dialog</title>

$(function() {

$( "#dialog" ).dialog({

autoOpen: false,

show: {

effect: "slideDown",

duration: 500

hide: {

effect: "explode",

duration: 500

}

});

$( "#openbtn" ).click(function() {

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

});

</script>

</head>

<body>

<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.

jQuery UI Dialog Plugin With Examples [Latest]

Byadmin

Contents

Dialog Plugin Options

Dialog Plugin Methods

Dialog Plugin Events

Dialog Plugin in Action

Default Functionality

Use of autoOpen option and open()

Use of hide and show option to animate the Dialog box

Like this:

By admin

Related Post

How to get an element with a specific index in jQuery With Example [Latest]

Find all the descendants of an element in jQuery With Example [Latest]

jQuery UI Button and Buttonset Widget With Examples [Latest]

Leave a ReplyCancel reply

You missed

[Solved] org.hibernate.HibernateException: get is not valid without active transaction With Examples [Latest]

How to Generate XML from XSD in Eclipse Example [Latest]

Queue Implementation in Java using Array With Examples [Latest]

Depth First Search (DFS) for a Graph With Examples [Latest]

Byadmin

Contents

Dialog Plugin Options

Dialog Plugin Methods

Dialog Plugin Events

Dialog Plugin in Action

Default Functionality

Use of autoOpen option and open()

Use of hide and show option to animate the Dialog box

Share this:

Like this:

By admin

Related Post

Leave a ReplyCancel reply

You missed