Learning jQuery: Optimize Using Modal Window or Dialog Box in JQuery UI

Learning jQuery: Optimize Using Modal Window or Dialog Box in JQuery UI


Spread it!

  • Share
This post is in the Learning jQuery series. Let's enjoy a post today by learning how to maximize the Modal Windows or Dialog Box in jQuery UI. This post explains how to use this Dialog Box on the right way. In the post that I published couple of months ago, I explained how to create a Modal window by using jQuery but not with the jQuery UI. That would be a lot of things to create your own without using any API. Today, with jQuery UI API, you can generate a same result but cool and easy-to-do.
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

Implement jQuery UI API

Because this library depends on jQuery, before loading this jQuery UI library, you must load jQuery. This tutorial will load all the libraries from jqueryui.com or you can download the latest version of jQuery UI here. Add these code to your webpage: 
  <!-- Begin all we need -->
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
  <!-- End all we need -->
  
  <!-- Implement this one if you want to drag and drop the dialog box -->
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  
  <!-- Implement this one if you want to resize the dialog box -->
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>

Basic Usage of Dialog jQuery UI

The basic usage will call the function dialog() which display a dialog message box contains the content of div element. However, because when the event start, jQuery did not initialize the div content, you only call this dialog one time unless you destroy the plugin instance first. 
<!DOCTYPE html>
<html>
<head>
  ...
  <script type="text/javascript">
    $(document).ready(function() {

        $("a#button1").click(function(e) {
      
            e.preventDefault();
            $("#dialog1").dialog();


        });

    });
  </script>
</head>
<body>
  
<div id="dialog1" title="Click Me" style="display: none;">You have just clicked on Button 1</div>
<a id="button1" href="#" >BUTTON 1</a>

</body>
</html>
Button 1

The problem is when you try to instantiate a new dialog every time the user performs some action events, the second call is ignored because the dialog has already been instantiated on that element. However, if you change your code with some differences likes this below, the dialog message box will display each time and every time.

Solution 1: Remove the dialog functionality completely. This method will return the element back to its pre-init state, then call the dialog again. 
  <script type="text/javascript">
    $(document).ready(function() {

        $("a#button2").click(function(e) {
      
            e.preventDefault();
            $('#dialog2').dialog('destroy');
            $("#dialog2").dialog();


        });

    });
  </script>
Button 2
Solution 2:

Thanks to Scott González for this solution. According to his solution, the simple solution to this problem is to instantiate the dialog with autoOpen set to false and then call .dialog('open') in the event handler.

<script type="text/javascript">
$(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen: false,
            title: 'Basic Dialog'
        });

    $('#button3').click(function(e) {
        e.preventDefault();
        $dialog.dialog('open');
    });
});
</script>
Button 3

Use it on a right way

If you are using this jQuery UI Dialog for your website to notify users messages, the right way to use this dialog box for your whole website is write a function for this dialog and use it by calling your function. Your function would be like: 
<script type="text/javascript">

function showDialog(str,strtitle)
{

    if(!strtitle) strtitle='Error message';

    $('#dialog').dialog('destroy');
    $('#dialog').show();
    $('#dialog').html(str);
    
    $("#dialog").dialog({
        resizable: false,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.9
        },
        title:strtitle
    });

}

</script>
And each time you want to display your dialog message box, you just need to change the title or dialog's message. 
    <div id="dialog"></div>
    <a onclick="showDialog('You are doing it in the right way', 'Message');" href="#">Button 4</span>
Button 4

Confirmation Dialog Message Box

If you need users confirm before executing, the only way is display confirmation buttons (OK/Cancel) on the dialog. Each button has a callback function for when the button is clicked. 

<script type="text/javascript">

function showDialog(str,strtitle)
{

    if(!strtitle) strtitle='Error message';

    $('#dialog').dialog('destroy');
    $('#dialog').show();
    $('#dialog').html(str);
    
    $("#dialog").dialog({
        resizable: false,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.9
        },
        title:strtitle,
        buttons: {
            'OK': function() {
                
                // Execute

            },
            'Cancel': function() {
                
                // I'm sorry, I changed my mind
                
            } 
        }
    });

}

</script>
Button 5

Conclusion

The jQuery UI API provides us advance effects that you can use to build highly interactive web applications. Like many jQuery UI effects, jQuery UI Dialog is easy to learn. Using it on the right way to help it be more flexible and scalability.

Related Posts

  1. Learning jQuery: Submit form PHP Mac style Modal window
  2. Learning jQuery: Click Event with Locked Page likes Mac
  3. Learning jQuery: Horizontal Panel Sliding With animate() function
  4. Learning jQuery: Your First jQuery Plugin, “BubbleUP”
  5. Perfect signin dropdown box likes Twitter with jQuery
  • Digg This Post
  • Tweet This Post
  • Stumble This Post
  • Submit This Post To Delicious
  • Submit This Post To Reddit
  • Submit This Post To Mixx
  • Share on your Facebook
  • Submit this post to Dzone
  • Submit this post to Designbump
  • Submit this post to TheWebBlend

Author: Lam Nguyen

I'm Lam Nguyen, a 21 year old web developer writing about everything related to web design. I am owner of AEXT.NET and WhoFreelance.com Web Community News. You can catch me on twitter.

Posted in: Tutorials
Tags: Javascript, jQuery, jQuery Dialog, jQuery UI, Learning jQuery


27 User Comments

  1. chad 18. Dec, 2009 at 7:06 am #

    I prefer Impromptu. Much cleaner and better looking. its “states” are pretty cool too

    Reply
  2. Kawsar Ali | Desizn Tech 18. Dec, 2009 at 11:27 pm #

    Nice tut Lam. I also the modal plugin too

    Reply
  3. Lam Nguyen 19. Dec, 2009 at 3:12 am #

    Thanks for your positive comment Kawsar!

    Reply
  4. Nikita Sumeiko 21. Dec, 2009 at 1:06 am #

    Thanks Lam! This ways of implementing really helped me out to use JQuery UI in my company’s administration section!
    Keep growing and Marry Christmas.

    Reply
  5. fabian 21. Dec, 2009 at 7:34 am #

    Hi.
    Nice job.!
    All links on the page remain active… shouldn’t them be disabled when the modal dialog opens?

    Reply
  6. Lam Nguyen 21. Dec, 2009 at 12:17 pm #

    You will set:


    modal: true,

    In its options

    Reply
  7. wespai 21. Dec, 2009 at 11:57 pm #

    thx collection it to

    http://ajax.wespai.com

    Reply
  8. wespai 21. Dec, 2009 at 11:58 pm #

    collection it to

    ajax.wespai.com

    thx

    Reply
  9. SMiGL 22. Dec, 2009 at 2:10 pm #

    simple and helpful

    Reply
  10. hung 03. Jan, 2010 at 7:28 pm #

    cam on lam.minh la nguoi viet nam,minh hoc hoi dc can ban tu nhung vi du cua ban

    Reply
  11. denbagus 03. Jan, 2010 at 9:52 pm #

    I finally found a very useful tutorial. thanks

    Reply
  12. Sam 16. Jan, 2010 at 3:29 pm #

    I’m getting some errors on this page that don’t allow the buttons to work. It seems you forgot to include the JQuery UI library or something

    Reply
    • Lam Nguyen 16. Jan, 2010 at 3:57 pm #

      You should use the Firebug to catch the error. This one doesn’t use jQuery UI!

      Reply
  13. Indialike 20. Jan, 2010 at 6:52 am #

    Very nice and useful tutorials for web designers,
    Thanks for posting.

    Reply

Trackbacks/Pingbacks

  1. Tweets that mention Learning jQuery: Optimize Using Modal Window or Dialog Box in JQuery UI | AEXT.NET -- Topsy.com - 18. Dec, 2009

    [...] This post was mentioned on Twitter by Lam Nguyen, Web Design News. Web Design News said: Learning jQuery: Optimize Using Modal Window or Dialog Box in JQuery UI http://bit.ly/76fXwQ [...]
  2. uberVU - social comments - 18. Dec, 2009

    Social comments and analytics for this post…

    This post was mentioned on Twitter by allwebdesign: Learning jQuery: Optimize Using Modal Window or Dialog Box in JQuery UI http://bit.ly/76fXwQ...
  3. tripwire magazine | tripwire magazine - 18. Dec, 2009

    [...] Optimize Using Modal Window or Dialog Box in JQuery UI [...]
  4. CSS Brigit | Optimize Using Modal Window or Dialog Box in JQuery UI - 21. Dec, 2009

    Optimize Using Modal Window or Dialog Box in JQuery UI…

    This post is in the Learning jQuery series. Let's enjoy a post today by learning how to maximize the Modal Windows or Dialog Box in jQuery UI. This post explains how to use this Dialog Box on the right way….
  5. 90+ New Community Posts for Designers and Developers | tripwire magazine - 22. Dec, 2009

    [...] Optimize Using Modal Window or Dialog Box in JQuery UI [...]
  6. 90+ New Community Posts for Designers and Developers | Programming Blog - 22. Dec, 2009

    [...] Optimize Using Modal Window or Dialog Box in JQuery UI [...]
  7. Optimize Using Modal Window or Dialog Box in JQuery UI | Design Newz - 23. Dec, 2009

    [...] Optimize Using Modal Window or Dialog Box in JQuery UI [...]
  8. 90+ New Community Posts for Designers and Developers | Afif Fattouh - Web Specialist - 05. Jan, 2010

    [...] Optimize Using Modal Window or Dialog Box in JQuery UI [...]
  9. 25 Tutorials and Resources for Learning jQuery UI - Speckyboy Design Magazine - 20. Jan, 2010

    [...] Using Modal Window or Dialog Box in JQuery UI [...]
  10. 25 Tutorials and Resources for Learning jQuery UI · rogdykker - 20. Jan, 2010

    [...] Using Modal Window or Dialog Box in JQuery UI [...]
  11. 25 Tutorials and Resources for Learning jQuery UI | Programming Blog - 20. Jan, 2010

    [...] Using Modal Window or Dialog Box in JQuery UI [...]
  12. 25 Tutorials and Resources for Learning jQuery UI | EMDMA - 20. Jan, 2010

    [...] Using Modal Window or Dialog Box in JQuery UI [...]

Leave a Reply

CommentLuv Enabled