<!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-modal").dialog({
                height: 140,
                modal: true
            });
        });
    </script>
</head>
<body>

    <div id="dialog-modal" title="Basic modal dialog">
        <p>
            Adding the modal overlay screen makes the dialog 
        look more prominent because it dims out the page content.
        </p>
    </div>

    <p>
        Sed vel diam id libero <a >rutrum convallis</a>.
        Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. 
        Etiam bibendum, enim faucibus aliquet rhoncus, 
        arcu felis ultricies neque, sit amet auctor elit eros a lectus.
    </p>
</body>
</html>

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

添加確認(rèn)和取消按鈕

可以通過配置主按鈕，和從按鈕的方法來為對(duì)話框添加按鈕，此時(shí)如果需要把”X”從右上角去掉，可以通過 CSS 來實(shí)現(xiàn)，具體可以參考下例：使用 dialogClass: “no-close”

<!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>
    <style>
        .no-close .ui-dialog-titlebar-close {
            display: none;
        }
    </style>
    <script>
        $(function () {
            $("#dialog-confirm").dialog({
                dialogClass: "no-close",
                resizable: false,
                width: 400,
                height: 250,
                modal: true,
                buttons: {
                    "Delete all items": function () {
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    </script>
</head>
<body>

    <div id="dialog-confirm" title="Empty the recycle bin?">
        <p>

            <span class="ui-icon ui-icon-alert"
                style="float: left; margin: 0 7px 20px 0;"></span>
            These items will be permanently deleted 
        and cannot be recovered. Are you sure?
        </p>
    </div>

    <p>
        Sed vel diam id libero <a >rutrum convallis</a>.
        Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante.
        Etiam bibendum, enim faucibus aliquet rhoncus,
        arcu felis ultricies neque, 
        sit amet auctor elit eros a lectus.
    </p>

</body>
</html>

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

上一篇：Selectors下一篇：jQuery UI Tooltip 示例

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

jQuery UI Dialog 示例（二）

模式對(duì)話框

添加確認(rèn)和取消按鈕