jQuery 对话框在 ASP.NET 母版页中的应用

• 下载示例解决方案

引言

多年来，Web 开发人员一直享受着 jQuery 的优雅。我们许多人已经使用 jQuery Dialog 用于不同的目的。

在这篇文章中，我尝试展示如何将其轻松集成到您的母版页中。 在此对话框代码之前，您需要导入 jQuery 核心和 UI 库。 将对话框代码定义在母版页的 head 部分。 如果您想了解它的所有属性和配置，可以在 这里找到文档。

<script type="text/javascript">
$(function () {var dialogDefine = $("#divLoginDialog").dialog({
       autoOpen: false,
       modal: true,
       closeOnEscape: true,
       draggable: false,
       resizable: false,
       position: [350, 250],
       title: "Login",
       overlay: "background-color: black; opacity: 90",
       buttons: {
       Cancel: function(){ $(this).dialog('close');},
       Ok: function () { /*Call your custom validation code;*/ }}
}); //end dialog
$("#hlkShowLogin").click(function () {
    $("#divLoginDialog").dialog('open');
    $("#divLoginDialog").parent().appendTo($("form:first"));
    return;
});
});//end Jquery
</script>

将显示对话框的超链接如下所示

<a href="#" id="hlkShowLogin" 
class="link">Login</a>

这是登录对话框的 HTML。 在这篇文章中，我使用了 jQuery 按钮，但您可以使用 ASP.NET 按钮。

编辑： 示例项目现在使用 ASP.Net 按钮，而不是 jQuery 对话框按钮。

<div id="divLoginDialog" style="display: none;">
<table cellspacing="0" cellpadding="2">
<tr>
<td class="label">User Name:</td>
<td>
<asp:TextBox ID="txtUserName" ClientIDMode="Static"  runat="server"/>
<asp:RequiredFieldValidator ErrorMessage="User name required" 
ControlToValidate="txtUserName" runat="server" />
</td>
</tr>
<tr>
<td class="label">Password:</td>
<td>
<asp:TextBox ID="txtPassword" Mode="password" 
ClientIDMode="Static"  runat="server"/>
<asp:RequiredFieldValidator ErrorMessage="Password required" 
ControlToValidate="txtPassword" runat="server" />
</td>
</tr>
</table>
</div>

您可以下载 示例解决方案，该解决方案基于 ASP.NET。