两种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 location.replace与location.reload的区别
Sep 08 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
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
浅析is_writable的php实现
2013/06/18 PHP
php导入导出excel实例
2013/10/25 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python pandas生成时间列表
2019/06/29 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
班组安全员工作职责
2014/02/01 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
企业整改报告范文
2014/11/08 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年维修工作总结
2015/04/25 职场文书
行政处罚告知书
2015/07/01 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
python 标准库原理与用法详解之os.path篇
2021/10/24 Python