How to create Animated Dialogs using UI Dialog (jQuery)

How to create Animated Dialogs using UI Dialog (jQuery)

1 63975
How to create dialogs using UI Dialog

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:

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

<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/ui.theme.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div class="example">
    <div>
        <button id="toggle1">Open dialog 1</button>
        <button id="toggle2">Open dialog 2</button>
        <button id="toggle3">Modal dialog #3</button>
    </div>
    <div>
        <button id="top1">Move to top dialog 1</button>
        <button id="top2">Move to top dialog 2</button>
        <button id="toggle4">Modal dialog #4</button>
    </div>
    <div>
        <button id="enable1">Enable dialog 1</button>
        <button id="enable2">Enable dialog 2</button>
    </div>
    <div>
        <button id="disable1">Disable dialog 1</button>
        <button id="disable2">Disable dialog 2</button>
    </div>
    <div>
        <div id="dialog1" title="Dialog #1">
            <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>
        </div>
        <div id="dialog2" title="Dialog #2">
            <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>
        </div>
        <div id="dialog3" title="Dialog #3 (modal)">
            <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>
        </div>
        <div id="dialog4" title="Dialog #4 (modal)">
            <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>
            <form>
            <fieldset>
                <label for="name">Name</label>
                <input type="text" name="name" id="name" /><br />
                <label for="password">Password</label>
                <input type="password" name="password" id="password" value="" />
            </fieldset>
            </form>
        </div>
    </div>
</div>

Step 2. CSS

Here are used CSS styles.

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.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}
.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

$(function(){
    // dialog 1 properties
    $('#dialog1').dialog({
        autoOpen: false,
        show: 'slide',
        hide: 'explode',
        buttons: { 'Close': function() { $(this).dialog('close'); } },
        closeOnEscape: true,
        resizable: false
    });
    // dialog 1 open/close
    $('#toggle1').click(function() {
        if ($('#dialog1').dialog('isOpen') == true)
            $('#dialog1').dialog('close');
        else
            $('#dialog1').dialog('open');
        return false;
    });
    // dialog 2 properties
    $('#dialog2').dialog({
        autoOpen: false,
        show: 'blind',
        hide: 'fold',
        closeOnEscape: true
    });
    // dialog 2 open/close
    $('#toggle2').click(function() {
        if ($('#dialog2').dialog('isOpen') == true)
            $('#dialog2').dialog('close');
        else
            $('#dialog2').dialog('open');
        return false;
    });
    // dialog 3 properties
    $('#dialog3').dialog({
        autoOpen: false,
        show: 'fade',
        hide: 'fade',
        modal: true,
        buttons: {
            'Ok': function() { $(this).dialog('close'); },
            'Close': function() { $(this).dialog('close'); }
        },
        resizable: false
    });
    // dialog 3 open/close
    $('#toggle3').click(function() {
        if ($('#dialog3').dialog('isOpen') == true)
            $('#dialog3').dialog('close');
        else
            $('#dialog3').dialog('open');
        return false;
    });
    // dialog 4 properties
    $('#dialog4').dialog({
        autoOpen: false,
        show: 'highlight',
        hide: 'scale',
        modal: true,
        buttons: {
            'Login': function() {
                var name = $('#name').val(), password = $('#password').val();
                var mydialog4 = $(this);
                if (name != '' && password != '') {
                    $.ajax({
                      type: 'POST',
                      url: 'some.php',
                      data: 'name='+name+'&pass='+password,
                      success: function(msg){
                        alert(msg);
                        $(mydialog4).dialog('close');
                      }
                    });
                }
            },
            'Close': function() { $(this).dialog('close'); }
        },
        resizable: false,
        width: '400px'
    });
    // dialog 4 open/close
    $('#toggle4').click(function() {
        if ($('#dialog4').dialog('isOpen') == true)
            $('#dialog4').dialog('close');
        else
            $('#dialog4').dialog('open');
        return false;
    });
    // moveToTop functionality
    $('#top1').click(function() {
        $('#dialog1').dialog('moveToTop');
    });
    $('#top2').click(function() {
        $('#dialog2').dialog('moveToTop');
    });
    // enable functionality
    $('#enable1').click(function() {
        $('#dialog1').dialog('enable');
    });
    $('#enable2').click(function() {
        $('#dialog2').dialog('enable');
    });
    // disable functionality
    $('#disable1').click(function() {
        $('#dialog1').dialog('disable');
    });
    $('#disable2').click(function() {
        $('#dialog2').dialog('disable');
    });
});

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

<?
$sName = $_POST['name'];
$sPass = $_POST['pass'];
echo "Date received: Name={$sName}, Pass={$sPass}";
?>

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!

SIMILAR ARTICLES


1 COMMENT

Leave a Reply