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