做了一个遮罩层
最近想在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的判断问题，如果有人感兴趣可以自己试着做一下
关于用法也很简单，源码我已经上传了下面是效果：