论坛首页 → Web前端技术论坛 →

做了一个遮罩层

浏览 16536 次
锁定老帖子 主题：做了一个遮罩层
精华帖 (0) :: 良好帖 (3) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • Cindy_Lee
  • 等级: 二星会员
  • 性别:
  • 文章: 293
  • 积分: 210
  • 来自: 武汉人在北京
   发表时间：2009-09-06   最后修改：2009-09-06

最近想在gae上做一个博客 ，要用到遮罩层，在网上找个很多感觉不是这么好，所以就自己做了一个。怕麻烦皮肤我就在网上随便下的一个（表骂我 ），看代码吧：

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>遮罩层，组件层实例</title>
<link href="css/shade.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/shade.js" charset="gb2312"></script>
<script type="text/javascript" src="js/config.js" charset="gb2312"></script>
</head>
<body>
<p style="color:red;">该遮罩层已经在FF3.5,IE7,Opera测试通过，在IE6中有一些小bug：无法使遮罩层透明显示，组件层无法固定定位</p>
<p style="color:red;">以管理员登录为例子 主要配置文件为<a href="js/shade.js">shade.js</a>，<a href="js/config.js">config.js</a>中存放组件的配置，这个文件需要使用者自己配置。</p>
<p style="color:red;">Author：Cindy QQ：283502037 JavaEye: <a href="http://cindy-lee.iteye.com">http://cindy-lee.iteye.com</a></p>
<input type="button" value="点击生成遮罩层及其组件" onclick="Shade.show(login);"/>
</body>
</html>

 下面是主要的js：

//得到浏览器显示的屏幕高度
document.getViewportHeight = function(){
	if (window.innerHeight!=window.undefined) return window.innerHeight;
	if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
	if (document.body) return document.body.clientHeight; 
	return window.undefined; 
}
//得到浏览器显示的屏幕宽度
document.getViewportWidth = function(){
	if (window.innerWidth!=window.undefined) return window.innerWidth; 
	if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth; 
	if (document.body) return document.body.clientWidth; 
}
/**
 * 遮罩层，组件的显示及隐藏
 */
Shade = {
	mask:null,
	container:null,
	isIE6:null,
	init:function(){
			//判断浏览器是否是ie6或其以下版本
			var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
			if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
				this.isIE6 =  true;
			}else{
				this.isIE6 = false;	
			}
			//将遮罩层加入body
			var popmask = document.createElement('div');
			popmask.id = 'mask';
			document.body.appendChild(popmask);
			this.mask = document.getElementById("mask");
			
			//将组件边框加入body
			var popcont = document.createElement('div');
			popcont.id = 'popupContainer';
			popcont.innerHTML ="<div id='popupInner'>"+
									"<div id='popupTitleBar'>"+
										"<div id='popupTitle'></div>"+
										"<div id='popupControls'>"+
										"<img src='images/close.gif' onclick='Shade.hide();' id='popCloseBox' />"+
									"</div></div>"+
								"<div id='popupFrame'>dd</div>";
			document.body.appendChild(popcont);
			this.container = document.getElementById("popupContainer");
	},
	setMaskSize:function(){
			var theBody = document.body;
			
			var fullHeight = document.getViewportHeight();
			var fullWidth = document.getViewportWidth();
			
			if (fullHeight > theBody.scrollHeight) {
				this.popHeight = fullHeight;
			} else {
				this.popHeight = theBody.scrollHeight;
			}
			
			if (fullWidth > theBody.scrollWidth) {
				this.popWidth = fullWidth;
			} else {
				this.popWidth = theBody.scrollWidth;
			}
			
			this.mask.style.height = this.popHeight + "px";
			this.mask.style.width = this.popWidth + "px";
	},
	toCenter:function(conf){
		var s = this.container.style;
		s.left = (document.getViewportWidth()-conf.width)/2+"px";
		s.top = (document.getViewportHeight()-conf.height)/2+"px";
	},
	show:function(conf){
		//初始化
		this.init();
		//设置遮罩层的长度和宽度
		this.setMaskSize()
		//设置组件的标题
		document.getElementById('popupTitle').innerHTML = conf.title;
		//设置组件的长和宽
		this.container.style.width = conf.width+"px";
		this.container.style.height = conf.height+"px";
		var frame = document.getElementById('popupFrame');	
		frame.style.width = (conf.width -4)+"px";
		frame.style.height = (conf.height -31)+"px";
		//将组件居中显示
		this.toCenter(conf);
		//设置组件内容
		frame.innerHTML = conf.templete;
	},
	hide:function(){
		//删除遮罩层
		document.body.removeChild(this.mask);
		//删除组件层
		document.body.removeChild(this.container);
	}
}

 下面是关于组件里显示内容的配置：

var login = {
	//组件标题
	title:"管理员登录",
	//组件的宽度
	width:300,
	//组件的高度
	height:190, 
	//组件里面的内容
	templete:"<form action='' method='get' class='formClass' id='login'>"+  
	"<table>"+		
		"<tr>"+        
			"<td width='30%'><label class='lab'>账号：</label></td>"+       
			"<td width='40%'><input class='input_text' type='text' name='username'/></td>"+         
			"<td width='30%'><span class='point_out'>*您的账号</span></td>"+      
		"</tr>"+    
		"<tr>"+  
			"<td><label class='lab'>密码：</label></td>"+    
			"<td><input class='input_text' type='password' name='pwd'/><br /></td>"+     
			"<td><span class='point_out'>*您的密码</span></td>"+     
		"</tr>"+   
	"</table>"+  
	"<span class='point_out' id='loging'>正在登录....</span><br/>"+  
	"<input class='inupt_button' type='button' value='确定' onclick=''/>"+  
	"<input class='inupt_button'  type='button' onclick='Shade.hide();' value='取消' />"+  
" </form>"
}

 

@charset "utf-8";
/* CSS Document */
#popupContainer {
	position: fixed !important;
	position: absolute;
	z-index: 201;
}
#popupInner {
	border: 2px solid #000000;
	background-color: #ffffff;
}

#popupFrame {
	text-align: center;
	margin: 0px;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 202;
	background-color: #FFFFFF;
}
#popupTitleBar {
	background-color: #486CAE;
	color: #ffffff;
	font-weight: bold;
	height: 18px;
	padding: 5px;
	border-bottom: 2px solid #000000;
	border-top: 1px solid #78A3F2;
	border-left: 1px solid #78A3F2;
	border-right: 1px solid #204095;
	position: relative;
	z-index: 203;
}
#popupTitle {
	float:left;
	font-size: 15px;
}
#popupControls {
	float: right;
	cursor: pointer;
	cursor: hand;
}
#mask {
	position: fixed !important;
	position: absolute;
	opacity: .4;
	filter: alpha(opacity=40);
	left: 0px;
	top: 0px;
	background-color: #999999;
}


/*login*/
.input_text{
	height:18px;
	border:1px solid #CCC;
	background-color:#FFF;
	width: 120px;
	margin: 5px;
	padding: 2px;
}

.input_text:hover {
	solid #999;
	background-color:#FFFFCC;
}

.formClass {
	align: center;
	padding-top: 10px;
	padding-bottom: 5px;
}
table {
	margin-left:auto;
	margin-right:auto;
}
.point_out {
	font-size: 12px;
	color: #FF0000;
}

.inupt_button {
	height: 25px;
	width: 60px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}
.lab {
	text-align: right;
	vertical-align: middle;
	margin: 0px;
	font-size: 14px;
	font-family: "黑体";
}

 

因为我要做的应用没有select标签所以就没有添加select的判断问题，如果有人感兴趣可以自己试着做一下

关于用法也很简单，源码我已经上传了下面是效果：

  • 大小: 82 KB
返回顶楼
         
  • ycysth
  • 等级: 初级会员
  • 性别:
  • 文章: 55
  • 积分: 0
  • 来自: 成都
   发表时间：2009-09-07  
这个效果现在很适用，不过感觉复杂了些
返回顶楼
          回帖地址
0 请登录后投票
  • jkfzero
  • 等级: 初级会员
  • 性别:
  • 文章: 690
  • 积分: 20
  • 来自: 北京
   发表时间：2009-09-09  
我觉得也没价值的时候初始化遮盖层，然后改变它的display控制显示隐藏比较好。
返回顶楼
          回帖地址
0 请登录后投票
  • Cindy_Lee
  • 等级: 二星会员
  • 性别:
  • 文章: 293
  • 积分: 210
  • 来自: 武汉人在北京
   发表时间：2009-09-11  
jkfzero 写道
我觉得也没价值的时候初始化遮盖层，然后改变它的display控制显示隐藏比较好。


我之前的确是这样想的,但是做的时候出现了一点小bug,遮罩层在个别浏览器上无法隐藏掉,不知道是不是我编码的时候出现了问题,没有仔细看,不过既然你提出来的那我会再试试.
返回顶楼
          回帖地址
0 请登录后投票
  • vb2005xu
  • 等级: 一钻会员
  • 性别:
  • 文章: 722
  • 积分: 800
  • 来自: 北京
   发表时间：2009-10-02  
在你这个基础之上,我重新写了下代码,增强了如下几个功能...
增加拖拽,浏览器窗口缩放时遮罩层自动缩放等功能
代码请到我的博客下载
返回顶楼
          回帖地址
0 请登录后投票
  • vb2005xu
  • 等级: 一钻会员
  • 性别:
  • 文章: 722
  • 积分: 800
  • 来自: 北京
   发表时间：2009-10-02  
见这里: http://www.iteye.com/topic/481263
返回顶楼
          回帖地址
0 请登录后投票
  • elvishehai
  • 等级: 初级会员
  • 性别:
  • 文章: 167
  • 积分: 0
  • 来自: 广州
   发表时间：2009-10-06  
如果是在一个iframe中，iframe的大小小于div，你是怎么处理，
返回顶楼
          回帖地址
0 请登录后投票
  • Cindy_Lee
  • 等级: 二星会员
  • 性别:
  • 文章: 293
  • 积分: 210
  • 来自: 武汉人在北京
   发表时间：2009-10-06  
vb2005xu 写道
在你这个基础之上,我重新写了下代码,增强了如下几个功能...
增加拖拽,浏览器窗口缩放时遮罩层自动缩放等功能
代码请到我的博客下载

感谢你的修改，我已经下载了你修改的代码，完善的功能挺不错，谢谢
返回顶楼
          回帖地址
2 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics