jQuery Dialog Basics

Posted on Wednesday, May 22, 2013



I am starting to learn jQuery for a current job I am working on.  I thought I would put up some notes I am writing on the subject as I study it.   I am sure there are far better notes and sites out there to learn jQuery from, given my current level of beginner.   But who knows, maybe you are a beginner to and you might find this useful.

I have a need to create a modal dialog in a page  (a pop in alert).  And this dialog needs to have a notification and a few buttons on it.




I will be using the jquery hosted libraries from google.  For more information on these you can go see their site https://developers.google.com/speed/libraries/devguide#jquery [1]

Also since I need to use a theme I might as well use a hosted one.  Turns out google hosts some themes.  I found this site that lists several jQuery themes and their google hosted location http://www.stemkoski.com/jquery-ui-1-7-2-themes-list-at-google-code/ [2]


Being a newbie I want to see what the different themes look like before I choose one.    jQuery has a nice page for viewing a UI before choosing one http://jqueryui.com/themeroller/ [3]











From this page Click on Gallery,  this will bring up a selection of themes you can click on to see their different widgets.






Click any Theme you want to view.  As an example I clicked on UI darkeness






It shows how the buttons would look like.


After pocking around I decided to use the smoothness theme which is hosted at google at  http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css 



First Dialog Window


The Jquery folks have a nice page that goes over the dialog widget, its located at http://jqueryui.com/dialog/ [5]


The api information for dialog can be found at




Below is some HTML for a very basic dialog

<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />

    <script>

        $(function () {
            $("#dialog").dialog();
        });
    </script>
</head>
<body>


<div id="dialog" title="Dialog TitleBar">
<p>This is a basic dialog window, it can be closed by pushing the x in the upper right </p>
</div>
</body>
</html>






The result is this.  A dialog box that can be dragged anywhere by its title bar, It can be resized, and to close it click the X in the upper right






To make it a fixed size set the resizeable to false


<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
    <script>

        $(function () {
            $("#dialog").dialog({
                resizable: false
            });
        });
    </script>
</head>
<body>


<div id="dialog" title="Dialog TitleBar">
<p>This is a basic dialog window, it can be closed by pushing the x in the upper right </p>
</div>
</body>
</html>






Now it can't be resized




Make it Modal


Make the dialog modal will cause it to grey out the rest of the screen and not allow any interaction with the rest of the page until it has been closed.


<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
    <script>

        $(function () {
            $("#dialog").dialog({
                resizable: false,
                modal: true
            });
        });
    </script>
</head>
<body>


<div id="dialog" title="Dialog TitleBar">
<p>This is a basic dialog window, it can be closed by pushing the x in the upper right </p>
</div>
<h1>
Testing this text
</h1>
</body>
</html>





Now you can't interact with the rest of the page until the dialog is closed.


Create a modal dialog that has an OK button to close it


<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
    <script>

        $(function () {
            $("#dialog").dialog({
                resizable: false,
                modal: true,

                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }

            });
        });
    </script>
</head>
<body>


<div id="dialog" title="Dialog TitleBar">
<p>This is a basic dialog window, it can be closed by pushing the x in the upper right </p>
</div>
<h1>
Testing this text
</h1>
</body>
</html>







You can add as many buttons as you want.   In this example I created two buttons.   The both close the dialog box, but you could add more JavaScript in there to have them do something.



<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
    <script>

        $(function () {
            $("#dialog").dialog({
                resizable: false,
                modal: true,

                buttons: {
                    cancel: function () {
                        $(this).dialog("close");
                    },
                    proceed: function () {
                        $(this).dialog("close");
                    }
                }

            });
        });
    </script>
</head>
<body>


<div id="dialog" title="Dialog TitleBar">
<p>This is a basic dialog window, it can be closed by pushing the x in the upper right </p>
</div>
<h1>
Testing this text
</h1>
</body>
</html>






Well that got me what I wanted a modal dialog with multiple buttons.
So I will right this up as a small success in learning jQuery.


References
[1]        jQuery google hosted
                Accessed 05/2013
[2]        jQuery UI 1.7.2 Themes List at Google Code
            Ryan Stemkoski
                Accessed 05/2013
[3]        jQuery Theme Roller
            http://jqueryui.com/themeroller/
                Accessed 05/2013
[4]        jQuery Dialog API
            http://api.jqueryui.com/dialog/
                Accessed 05/2013
[5]        jQuery Dialog
            http://jqueryui.com/dialog/
                Accessed 05/2013




No comments:

Post a Comment