做了一个遮罩层
最近想在gae上做一个博客，要用到遮罩层，在网上找个很多感觉不是这么好，所以就自己做了一个。怕麻烦皮肤我就在网上随便下的一个（表骂我http://www.agoit.com/images/smiles/icon_redface.gif），看代码吧：<!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="点击生成遮罩层及其组件" /></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;}//将遮罩层加入bodyvar popmask = document.createElement('div');popmask.id = 'mask';document.body.appendChild(popmask);this.mask = document.getElementById("mask");//将组件边框加入bodyvar 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的判断问题，如果有人感兴趣可以自己试着做一下
关于用法也很简单，源码我已经上传了下面是效果：http://dl.iteye.com/upload/attachment/143454/97811421-cebf-3cbb-a179-fcff41d546f2.jpg
页:
[1]