JqueryUI对话框实现示例

在网页设计中，不论是为了减少于由于页面跳转而带来的不友好用户体验，还是为了维持桌面应用程序的使用习惯，对话框的设计都是不可或缺的。

目前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上，这样当表单提交时，服务端就无法获取到对话框中的服务器控件相关的值了。