Geeks With Blogs
Liam McLennan hackingon.net

This series is going to document increasingly complex usages of the jQuery UI Dialog widget. This first part of the series will demonstrate how to display the default dialog.

Other series members:

jQuery UI Dialog: Part 2 – The Modal Dialog

The jQuery UI Dialog is a powerful client-side dialog control. It is bundled as part of the jQuery UI suite and as such it is available on the Google CDN. Some of its more interesting features are:

  • Modal / non-modal dialogs
  • Support for resizing and dragging
  • Support for buttons
  • Support for Theming
  • Stacking
  • Partially transparent modal overlay layer

The simplest usage of the dialog control is to select a div, and call the dialog() function.

View a Demo

Here is the complete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Default dialog</title>
    <link href="ui-darkness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</head>
<body>  
    <p>Some text on the page.</p>
    
    <div class="make_me_a_dialog">Content of div</div>
    
    <script type="text/javascript">

        $(document).ready(function() {

            $('.make_me_a_dialog').dialog();

        });
        
    </script>  
</body>
</html>
Posted on Wednesday, October 28, 2009 9:52 PM | Back to top

Copyright © Liam McLennan | Powered by: GeeksWithBlogs.net