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

327 阅读 0 评论 216 点赞

我是靠谱客的博主着急宝贝，最近开发中收集的这篇文章主要介绍两种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> 