<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#dialog").dialog();
        });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which 
        is useful for displaying information.
        The dialog window can be moved, 
        resized and closed with the 'x' icon.</p>
</div>

</body>
</html>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/41.png" alt="" />

對(duì)話框的缺省顯示有“X”關(guān)閉按鈕，可以縮放，移動(dòng)。

動(dòng)畫顯示效果

可以為對(duì)話框顯示和關(guān)閉添加動(dòng)畫效果，如果不希望對(duì)話框一開始就顯示（這可能是大部分情況，在點(diǎn)擊按鈕或是某個(gè)事件發(fā)生后再顯示對(duì)話框）可以通過配置 autoOpen=false 來設(shè)置。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#dialog").dialog({
                autoOpen: false,
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });

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

<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful 
        for displaying information. 
        The dialog window can be moved,
         resized and closed with the 'x' icon.</p>
</div>
 <button id="opener">Open Dialog</button>

</body>
</html>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/42.png" alt="" />

show 和 hide 支持的動(dòng)畫效果，后面再專門介紹，這些效果同時(shí)使用與其它方面，為 jQuery 支持的通用的動(dòng)態(tài)效果。

上一篇：jQuery UI Progressbar 示例下一篇：jQuery UI Button 示例（二）