两种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 相关文章推荐
js算法中的排序、数组去重详细概述
Oct 14 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
JS实现吸顶特效
Jan 08 Javascript
js前端图片加载异常兜底方案
Jun 21 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
php防攻击代码升级版
2010/12/29 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
Array对象方法参考
2006/10/03 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
Python模拟百度登录实例详解
2016/01/20 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
使用tensorflow实现线性回归
2018/09/08 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python input函数使用实例解析
2019/11/22 Python
Python类反射机制使用实例解析
2019/12/30 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
python 如何对logging日志封装
2020/12/02 Python
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
幼儿园新学期寄语
2014/01/18 职场文书
简历上的自我评价
2014/02/03 职场文书
导师工作推荐信范文
2014/05/17 职场文书
高效课堂标语
2014/06/26 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs