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>

 

 

效果图示:



遮罩层-色色增强版.zip (13.8 KB)

下载次数: 1196





大小: 73.6 KB

查看图片附件