jquery ui dialog

最新推荐文章于 2023-08-07 10:59:16 发布

KingCruel

最新推荐文章于 2023-08-07 10:59:16 发布

阅读量806

点赞数

分类专栏： JavaScript 文章标签： jquery ui dialog

本文链接：https://blog.csdn.net/KingCruel/article/details/44976725

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>弹出窗体</title>
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    <script src="~/js/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
    <button id="opener">open the dialog</button>
    <button id="btn1">test1</button>
    <div id="dialog" title="Dialog Title">
        I'm a dialog<br /><br />
        <table>
            <tr>
                <td style="text-align:right">name:</td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td style="text-align:right">age:</td>
                <td><input type="text" /></td>
            </tr>
        </table>
    </div>


    <script>
        $("#dialog").dialog({
            modal: true,
            autoOpen: false,
            show: "blind",  //打开时的效果
            hide: "explode",//关闭时的效果
            height: 530,
            width: 500,
            draggable: true, //true可以拖动,默认值就是true
            closeOnEscape: true, //是否采用esc键退出对 话框 如果true 采用esc
            resizable: true, //是否可以改变高度
            buttons: {//添加按钮操作
                "确定": function () {
                    $(this).dialog("close"); //关闭对话框
                },
                "取消": function () {
                    alert("取消的操作");
                }
            }
        });


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