繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 两种WEB下的模态对话框 （asp.net或js的分别实现）
- Javascript
- 仿搜狐女人频道FLASH图片切换效果
- JS CSS文章查看系统
- 走出JavaScript初学困境—js初学
- javascript 弹性菜单，垂直的那种
- javascript FormatNumber函数实现方法
- 动态创建的表格单元格中的事件实现代码
- js继承 Base类的源码解析
- javascript 一段代码引发的思考
- 很全的显示阴历（农历）日期的js代码
- 用于判断用户注册时，密码强度的JS代码
- JavaScript Prototype对象
- javascript 表单的友好用户体现
- javascript 方法覆写实例代码
- Javascript 生成指定范围数值随机数
- javascript 自动转到命名锚记
- 捕获关闭窗口的脚本
- 在网页里看flash的trace数据的js类
- JavaScript delete操作符应用实例
- js利用Array.splice实现Array的insert/remove
- JavaScript 私有成员分析
Javascript 中的 两种WEB下的模态对话框 （asp.net或js的分别实现）
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 397 ::
收藏到网摘: n/a
在如今互联网网站上，AJAX效果风靡一时，应该说AJAX技术在未来几年不会动摇，在AJAX效果中，模态对话框是比较常见的效果，也是非常适用的。 在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框
方法一
本方法是采用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写效果比用控件写更好，自己更明确整个效果代码的流程。
评论 (0) All
