<!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="" />

對話框的缺省顯示有“X”關閉按鈕，可以縮放，移動。

動畫顯示效果

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

<!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 支持的動畫效果，后面再專門介紹，這些效果同時使用與其它方面，為 jQuery 支持的通用的動態(tài)效果。

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

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

jQuery UI Dialog 示例（一）

基本用法

動畫顯示效果