当前位置:Gxlcms > JavaScript > jquery ui对话框实例代码

jquery ui对话框实例代码

时间:2021-07-01 10:21:17 帮助过:3人阅读

目前JqueryUI提供的对话框支持使用相对比较的方便,示例代码如下所示:
代码如下:
<body>
    <form id="form1" runat="server">

    <div id="dlg">

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    </div>

       <asp:Button ID="Showdlg" runat="server" Text="..." />

    </form>

    <script type="text/javascript" language="javascript">

      $(function () {

             $("#dlg").dialog({

                autoOpen: false,

                closed: true,

                width: 450,

                modal: true,

                appendTo: "form",

                buttons: {

                    "OK": function () {

                        $("form").submit();

                    },

                    "Cancle": function () {

                        $(this).dialog("close");

                    }

                },

                close: function () {

                }

            });

            $("#<%=Showdlg.ClientID%>").button().click(function() { $("#dlg").dialog("open"); return false });

         }

        );

    </script>

</body>

其中值得注意的是appendTo: "form"选项, JqueryUI Dialog默认情况向会将表示对话框的<div id="dlg">添加到Body上,这样当表单提交时,服务端就无法获取到对话框中的服务器控件相关的值了。

人气教程排行