两种WEB下的模态对话框 （asp.net或js的分别实现）
时间：2021-04-10 08:51:04|栏目：JavaScript代码|点击： 次
在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框
方法一
本方法是采用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写效果比用控件写更好，自己更明确整个效果代码的流程。
方法一
本方法是采用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写效果比用控件写更好，自己更明确整个效果代码的流程。
上一篇：js实现石头剪刀布游戏
栏 目：JavaScript代码
本文标题：两种WEB下的模态对话框 （asp.net或js的分别实现）
本文地址：http://www.codeinn.net/misctech/98180.html
