Cindy_Lee 实现的遮罩层的增强版本,增加了增加拖拽,浏览器窗口缩放时遮罩层自动缩放等功能

代码如下所示,代码已经被我重构.... 写的不好,请见谅...

config_VB2005XU.js

// JavaScript Document
var login_VB2005XU = {
	//组件标题
	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_VB2005XU.hide();' value='取消' />"+  
" </form>"
}

 

 

 Shade_VB2005XU.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_VB2005XU = {
	mask:null,
	container:null,
	isIE6:null,
	init:function(conf){
			//判断浏览器是否是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");
			this.mask.style.display = "none" ;
			
			//将组件边框加入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_VB2005XU.hide();' id='popCloseBox' />"+
									"</div></div>"+
								"<div id='popupFrame'>dd</div>";
			document.body.appendChild(popcont);
			this.container = document.getElementById("popupContainer");
			this.container.style.display = "none" ;
			
			
			// 加载自定义设置的内容 -- by 色色 -- 这些应该属于初始化的内容
			
			//设置组件的标题
			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";
			
			//设置组件内容
			frame.innerHTML = conf.templete;
			
			this.render(conf);
			this.enDrag();
			
			var Shade_this = this ; //传递this参数,到浏览器窗体改变事件
			Shade_this.conf = conf ;
			
			window.onresize = function(){
				if (Shade_this.container) {
					Shade_this.render(Shade_this.conf);
				}
			} ;
	} ,
	/*增加拖动功能*/
	enDrag: function(){		
		var popupTitleBar = document.getElementById('popupTitleBar') ;
		popupTitleBar.style.cursor = "move" ;
		Drag.init(popupTitleBar,this.container);
	} ,
	render:　function(conf){
		this.setMaskSize();
		this.toCenter(conf);
	} , 
	
	//设置遮罩层的长度和宽度
	setMaskSize:function(){
			var theBody = document.body;
			
			var fullHeight = document.getViewportHeight();
			var fullWidth = document.getViewportWidth();
			
			// Determine what's bigger, scrollHeight or fullHeight / width
			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(){
		//if ()
		this.container.style.display = this.mask.style.display = "" ;
	},
	hide:function(){
		//删除遮罩层
		document.body.removeChild(this.mask);
		//删除组件层
		document.body.removeChild(this.container);
	} 
} 

 

 

 

<!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/dom-drag.js" charset="gb2312"></script>
<script type="text/javascript" src="js/config_VB2005XU.js" charset="gb2312"></script>
<script type="text/javascript" src="js/Shade_VB2005XU.js" charset="gb2312"></script>

<!-- 原版版 -->
<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);"/>

<hr/>

<h1>色色增强版 [增加拖拽,浏览器窗口缩放时遮罩层自动缩放等功能] </h1>
<p style="color:red;">
该遮罩层已经在FF2.0,IE6,Opera测试通过，</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：色色[vb2005xu] QQ：中国PHP联盟群管理员 JavaEye: <a href="http://vb2005xu.iteye.com">http://vb2005xu.iteye.com</a></p>
<input type="button" value="点击生成遮罩层" onclick="Shade_VB2005XU.init(login_VB2005XU);Shade_VB2005XU.show();"/>


</body>
</html>
 

 

 

效果图示:

评论

10 楼 cuixiping 2009-11-21  

ymPrompt看似很强大，说明也很详细，有空试用一下。

9 楼 liufeng1981918 2009-11-21  

就想找个能支持ie6透明的遮罩层，可是没有呀，楼主看看能不能做一个给我qq305021563

8 楼 vb2005xu 2009-11-02  

http://vb2005xu.iteye.com/blog/508550

7 楼 whaosoft 2009-10-12  

sunjun 写道

LZ做的不错，不过轮子已经有人做得不错了, http://preview.zcool.com.cn/code/new_code/031/ 

是啊 而且轮子不是一条

6 楼 vb2005xu 2009-10-12  

对我而言 大了...

5 楼 sunjun 2009-10-12  

vb2005xu 写道

ymPrompt 并不好用... 而且比较大 ...

你用过了，就知道很好用，
ymPrompt_source.js  14.6KB
ymPrompt.js  压缩后 7.11KB

不知道这7KB的JS算不算比较大?

4 楼 vb2005xu 2009-10-11  

ymPrompt 并不好用... 而且比较大 ...

写js的时候用对象模型我觉得:

1. 使用命名空间
2. 方便代码组织,以及代码复用
3.

3 楼 sunjun 2009-10-11  

LZ做的不错，不过轮子已经有人做得不错了, http://preview.zcool.com.cn/code/new_code/031/ 

2 楼 wxq594808632 2009-10-10  

elvishehai 写道

为什么你们一定在写js的时候要用对象模型了，是什么原因了。

难道是java残留的习惯.呵呵..

1 楼 elvishehai 2009-10-06  

为什么你们一定在写js的时候要用对象模型了，是什么原因了。