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


Posted in Javascript onDecember 02, 2009

在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框
两种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 相关文章推荐
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 #Javascript
JS类的封装及实现代码
Dec 02 #Javascript
Jquery选择器 $实现原理
Dec 02 #Javascript
js 表格隔行颜色
Dec 02 #Javascript
让FireFox支持innerText的实现代码
Dec 01 #Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 #Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 #Javascript
You might like
咖啡知识大全
2021/03/03 新手入门
如何获得PHP相关资料
2006/10/09 PHP
php简单提示框alert封装函数
2010/08/08 PHP
深入解析php之sphinx
2013/05/15 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
Jquery Change与bind事件代码
2011/09/29 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
浅谈Python中的bs4基础
2018/10/21 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
python中判断文件结束符的具体方法
2020/08/04 Python
linux系统都有哪些运行级别
2012/04/15 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
餐饮加盟计划书
2014/01/10 职场文书
后备干部培训方案
2014/05/22 职场文书
个人校本研修方案
2014/05/26 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2015年公司新年寄语
2014/12/08 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
浅析Python实现DFA算法
2021/06/26 Python