两种WEB下的模态对话框（asp.net或js的分别实现）

在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框方法一本方法是采用ASP.NET AJAX的扩展控件：ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的：第一步，我们先创建一个ASP.NET页面:ModalPopup.aspx 页面代码：复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxControlToolkit.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .p_Login {}{ width: 230px; height: 180px; padding: 15px 15px 15px 15px; background-color: #fff; border: 2px solid #ccc; } .Password {}{ margin-left: 15px; } .ModalPopupBackground {}{ background-color:#dddddd; filter:alpha(opacity=60)； /**//*IE*/ opacity:60; /**//*Firefox*/ } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:LinkButton ID="lbtn_Login" runat="server">登陆</asp:LinkButton> <%--panel的display的CSS属性必须写在标签里面。--%> <asp:Panel ID="p_Login" CssClass="p_Login" runat="server" Style="display: none;"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <p> 用户名：<asp:TextBox ID="UserName" runat="server"></asp:TextBox> </p> <p> 密码：<asp:TextBox ID="Password" runat="server" CssClass="Password" TextMode="Password"></asp:TextBox> </p> <p> <asp:Button ID="Btn_Submit" runat="server" Text="登录" OnClick="Btn_Submit_Click" /> <asp:Button ID="Btn_Cancel" runat="server" Text="取消" OnClick="Btn_Cancel_Click" /> </p> <p> <asp:Label ID="lbResult" runat="server" Text=""></asp:Label> <p> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <cc1:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="p_Login" TargetControlID="lbtn_Login" BackgroundCssClass="ModalPopupBackground" runat="server"> </cc1:ModalPopupExtender> </div> </form> </body> </html> [code] 后台代码： [code] using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Btn_Submit_Click(object sender, EventArgs e) { if (this.UserName.Text.Trim().ToUpper() == "JACKY" && this.Password.Text.Trim() == "123") { this.lbResult.Text = "登陆成功！"; } else { this.lbResult.Text = "登录失败！"; } } protected void Btn_Cancel_Click(object sender, EventArgs e) { this.ModalPopupExtender1.Hide(); this.UserName.Text = ""; this.Password.Text = ""; this.lbResult.Text = ""; } } 就这样，通过很简单的扩展控件就实现了模态对话框的效果，但是，我后来想了想，我感觉用纯JS来实现更简单些，所以，我用纯JS来实现了一次，很快成功了！方法二我们这次创建一个HTML页面：Popup.html 代码如下：复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #loginContent {}{ position: absolute; left: 40%; top: 30%; width: 230px; height: 180px; padding: 15px 15px 15px 15px; background-color: #fff; border: 2px solid #ccc; background-color: #fff; z-index: 100; display:none; } #hideContent {}{ display:none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 50; background-color: #dddddd; filter: alpha(opacity=60)； /**//*IE*/ opacity:60; /**//*Firefox*/ } </style> <script type="text/javascript"> var hidecontent = document.getElementById("hideContent"); var logincontent = document.getElementById("loginContent"); function showModalPopup() { hideContent.style.display = "block"; loginContent.style.display = "block"; } function hideModalPopup() { hideContent.style.display = "none"; loginContent.style.display = "none"; } </script> <title></title> </head> <body> <a href="javascript:void(0);" onclick="showModalPopup();">登录</a> <div id="loginContent"> <a href="javascript:void(0);" onclick="hideModalPopup();">关闭</a> </div> <div id="hideContent"> </div> </body> </html> 就这样，我用两种方式实现了前面展示的那样的效果，其实我自己感觉，用纯JS写效果比用控件写更好，自己更明确整个效果代码的流程。

　　推荐阅读

　　javascript 面向对象全新理练之原型继承

首先创建一个父类的实例化对象，然后将该对象赋给子类的 prototype 属性。这样，父类中的所有公有实例成员都会被子类继承。并且用 instanceof 运算符判断时，子类的实例化对象既属于子类，也属于父类。然后将子类>>>详细阅读

本文标题：两种WEB下的模态对话框（asp.net或js的分别实现）

地址：http://www.17bianji.com/kaifa2/JS/27585.html

1/2 1

两种WEB下的模态对话框 （asp.net或js的分别实现）

两种WEB下的模态对话框（asp.net或js的分别实现）