jQuery UI Widget : Dialog

This widget is used to create a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the '+' icon by default.

f the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close').

To create a dialog box containing text of a element like div, we use :

$("#dialog").dialog();

For options, events ,method and theming click here

EXAMPLE :

dialog.html

<!DOCTYPE html>

            <html>

            <head>

            <link href="http://ajax.googleapis.com/ajax/libs

            /jqueryui/1.8/themes/base/jquery-ui.css" 
            rel="stylesheet" type="text/css"/>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

            </script>

            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">

            </script>

            <script>

            $(document).ready(function() {

            $("#dialog").dialog();

            });

            </script>

            </head>

            <body style="font-size:62.5%;">

            

            <div id="dialog" title="Dialog Title">This is a dialog box</div>

            

            </body>

            </html>

Output :

Download Source Code

Learn from experts! Attend jQuery Training classes.

jQuery UI Widget : Dialog