jquery ui对话框实例代码

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