Tag Archives: UI

Dialog UI with jQuery

Written by Garry Lachman (Admin). Posted on February 27, 2011. Filed under jQuery. Tagged , , , , , , , . .

Very useful widget from jQuery package is the Dialog windows.
its the best replacement for alert command and its very easy to use.

How its work:
First of all we need to load the jQuery js files & the default UI Widgets css file (you can download the css file and customize it).
put the code in header (

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>

Than add the div with the title and the content

1
2
3
4
5
<div id="dialog" title="Basic dialog">

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

</div>

Init the jQuery dialog:

1
2
3
<script type="text/javascript">// <![CDATA[
 $(function() {     $( "#dialog" ).dialog(); });
// ]]></script>

The complete code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">// <![CDATA[
        $(function() {
            $( "#dialog" ).dialog();
        });

// ]]></script>
<div id="dialog" title="Basic dialog">

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

</div>

Screenshot of jQuery Dialog UI Widget:

jQuery UI Dialog widget

jQuery UI Dialog widget

Have fun,
Garry Lachman

Share