两种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 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
vue+AI智能机器人回复功能实现
Jul 16 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制作静态网站的模板框架(二)
2006/10/09 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP curl使用实例
2015/07/02 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
Vue基础配置讲解
2019/11/29 Javascript
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
校友会欢迎辞
2014/01/13 职场文书
干部行政关系介绍信
2014/01/17 职场文书
贷款担保书范文
2014/05/13 职场文书
测绘工程专业求职信
2014/07/15 职场文书
党员作风建设自查报告
2014/10/23 职场文书
财务出纳岗位职责
2015/03/31 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技