Home » Tutorials

How to create Animated Dialogs using UI Dialog (jQuery)

Tutorials
Author Reading 14 min Views 965 Published by Modified by

UI Dialog tutorial. Today we continue jQuery lessons, and we will talk about creating user window dialogs. We will using UI Dialog plugin. This plugin allow us to choose text, buttons (and its behavior), and many other params of dialogs. These dialogs very user friendly, and it looks like boxes in Windows. Similar interface: content in center of dialog, in top-right corner – button ‘x’ to close dialog, also this is movable and resizable too, also it possible to add custom action buttons in bottom of dialog. Today I will tell you how you can create your own dialogs for your projects.

Here are sample and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. css/jquery-ui.css and css/ui.theme.css
  6. Step 3. JS
  7. js/main.js
  8. js/jquery-ui.min.js and js/jquery.min.js
  9. Step 4. PHP
  10. some.php
  11. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML.

This is our main page code with all samples.

index.html

01 <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
02 <link rel="stylesheet" href="css/ui.theme.css" type="text/css" media="all" />
03 <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
04 <script src="js/jquery.min.js" type="text/javascript"></script>
05 <script src="js/jquery-ui.min.js" type="text/javascript"></script>
06 <script src="js/main.js" type="text/javascript"></script>
07 <div class="example">
08     <div>
09         <button id="toggle1">Open dialog 1</button>
10         <button id="toggle2">Open dialog 2</button>
11         <button id="toggle3">Modal dialog #3</button>
12     </div>
13     <div>
14         <button id="top1">Move to top dialog 1</button>
15         <button id="top2">Move to top dialog 2</button>
16         <button id="toggle4">Modal dialog #4</button>
17     </div>
18     <div>
19         <button id="enable1">Enable dialog 1</button>
20         <button id="enable2">Enable dialog 2</button>
21     </div>
22     <div>
23         <button id="disable1">Disable dialog 1</button>
24         <button id="disable2">Disable dialog 2</button>
25     </div>
26     <div>
27         <div id="dialog1" title="Dialog #1">
28             <p>This dialog using 'slide/explode' methods to show/hide, plus, can be closed by 'close' button, by 'x' icon and by 'esc' button. This dialog window can be moved using mouse.</p>
29         </div>
30         <div id="dialog2" title="Dialog #2">
31             <p>This dialog using 'blind/fold' methods to show/hide, plus, can be closed by 'x' icon and by 'esc' button. This dialog window can be moved and resized using mouse.</p>
32         </div>
33         <div id="dialog3" title="Dialog #3 (modal)">
34             <p>This is the first modal dialog with some text and 2 buttons. This dialog window can be moved, resized and closed with the 'x' icon.</p>
35         </div>
36         <div id="dialog4" title="Dialog #4 (modal)">
37             <p>Another sample of modal dialogs - login forms. The dialog using 'highlight/scale' methods to 'show/hide'. Can be moved and closed with the 'x' icon.</p>
38             <form>
39             <fieldset>
40                 <label for="name">Name</label>
41                 <input type="text" name="name" id="name" /><br />
42                 <label for="password">Password</label>
43                 <input type="password" name="password" id="password" value="" />
44             </fieldset>
45             </form>
46         </div>
47     </div>
48 </div>

Step 2. CSS

Here are used CSS styles.

css/main.css

1 body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
2 .example{background:#FFF;width:600px;height:200px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
3 .example button {width:150px}

Other css files:

css/jquery-ui.css and css/ui.theme.css

no need to show here. It always available as a download package (all just because its just part of jquery styles)

Step 3. JS

Here are necessary JS files to our project.

js/main.js

001 $(function(){
002     // dialog 1 properties
003     $('#dialog1').dialog({
004         autoOpen: false,
005         show: 'slide',
006         hide: 'explode',
007         buttons: { 'Close': function() { $(this).dialog('close'); } },
008         closeOnEscape: true,
009         resizable: false
010     });
011     // dialog 1 open/close
012     $('#toggle1').click(function() {
013         if ($('#dialog1').dialog('isOpen') == true)
014             $('#dialog1').dialog('close');
015         else
016             $('#dialog1').dialog('open');
017         return false;
018     });
019     // dialog 2 properties
020     $('#dialog2').dialog({
021         autoOpen: false,
022         show: 'blind',
023         hide: 'fold',
024         closeOnEscape: true
025     });
026     // dialog 2 open/close
027     $('#toggle2').click(function() {
028         if ($('#dialog2').dialog('isOpen') == true)
029             $('#dialog2').dialog('close');
030         else
031             $('#dialog2').dialog('open');
032         return false;
033     });
034     // dialog 3 properties
035     $('#dialog3').dialog({
036         autoOpen: false,
037         show: 'fade',
038         hide: 'fade',
039         modal: true,
040         buttons: {
041             'Ok': function() { $(this).dialog('close'); },
042             'Close': function() { $(this).dialog('close'); }
043         },
044         resizable: false
045     });
046     // dialog 3 open/close
047     $('#toggle3').click(function() {
048         if ($('#dialog3').dialog('isOpen') == true)
049             $('#dialog3').dialog('close');
050         else
051             $('#dialog3').dialog('open');
052         return false;
053     });
054     // dialog 4 properties
055     $('#dialog4').dialog({
056         autoOpen: false,
057         show: 'highlight',
058         hide: 'scale',
059         modal: true,
060         buttons: {
061             'Login': function() {
062                 var name = $('#name').val(), password = $('#password').val();
063                 var mydialog4 = $(this);
064                 if (name != '' && password != '') {
065                     $.ajax({
066                       type: 'POST',
067                       url: 'some.php',
068                       data: 'name='+name+'&pass='+password,
069                       success: function(msg){
070                         alert(msg);
071                         $(mydialog4).dialog('close');
072                       }
073                     });
074                 }
075             },
076             'Close': function() { $(this).dialog('close'); }
077         },
078         resizable: false,
079         width: '400px'
080     });
081     // dialog 4 open/close
082     $('#toggle4').click(function() {
083         if ($('#dialog4').dialog('isOpen') == true)
084             $('#dialog4').dialog('close');
085         else
086             $('#dialog4').dialog('open');
087         return false;
088     });
089     // moveToTop functionality
090     $('#top1').click(function() {
091         $('#dialog1').dialog('moveToTop');
092     });
093     $('#top2').click(function() {
094         $('#dialog2').dialog('moveToTop');
095     });
096     // enable functionality
097     $('#enable1').click(function() {
098         $('#dialog1').dialog('enable');
099     });
100     $('#enable2').click(function() {
101         $('#dialog2').dialog('enable');
102     });
103     // disable functionality
104     $('#disable1').click(function() {
105         $('#dialog1').dialog('disable');
106     });
107     $('#disable2').click(function() {
108         $('#dialog2').dialog('disable');
109     });
110 });

This is most interesting and important part of our lesson. I put my comments quite anywhere, so it will easy to understand all this. Basically, constructor of forms allow us to determinate all necessary styles and behavior of our dialog: autoOpen, buttons, closeOnEscape, draggable, width, height, modal, position, resizable and all other options. Also we can add our own events to dialog events too. But I don`t used it, this was not so necessary in my case. jQuery dialogs allow us to perform some actions with already created dialogs: open, close, isOpen (to check – are dialog already opened or not), enable, disable, plus change options of dialog using ‘option’ method (in realtime).

You can visit this website to get full information about all Options, Events and Methods of dialogs.

js/jquery-ui.min.js and js/jquery.min.js

This is common files – jQuery library with UI plugin. No need to give full code of that file here. It always available in package

Step 4. PHP

Single used PHP file (which we will use for ajax response):

some.php

1 <?
2 $sName = $_POST['name'];
3 $sPass = $_POST['pass'];
4 echo "Date received: Name={$sName}, Pass={$sPass}";
5 ?>
Live Demo

Conclusion

Using interactive dialogs in your projects – very important step. This is big step to make your project more user friendly, so this is will one of good sides of your website. Sure that you will happy play with it. You can use this material to create own scripts into your startups. Good luck!

Rate article
© 2026 Script Tutorials