浏览 16532 次
|
锁定老帖子 主题：做了一个遮罩层
精华帖 (0) :: 良好帖 (3) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：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的判断问题，如果有人感兴趣可以自己试着做一下 关于用法也很简单，源码我已经上传了下面是效果： 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-09-07
这个效果现在很适用，不过感觉复杂了些
|
| 返回顶楼 | |
|
发表时间：2009-09-09
我觉得也没价值的时候初始化遮盖层，然后改变它的display控制显示隐藏比较好。
|
| 返回顶楼 | |
|
发表时间：2009-09-11
jkfzero 写道 我觉得也没价值的时候初始化遮盖层，然后改变它的display控制显示隐藏比较好。
我之前的确是这样想的,但是做的时候出现了一点小bug,遮罩层在个别浏览器上无法隐藏掉,不知道是不是我编码的时候出现了问题,没有仔细看,不过既然你提出来的那我会再试试. |
| 返回顶楼 | |
|
发表时间：2009-10-02
在你这个基础之上,我重新写了下代码,增强了如下几个功能...
增加拖拽,浏览器窗口缩放时遮罩层自动缩放等功能 代码请到我的博客下载 |
| 返回顶楼 | |
|
发表时间：2009-10-02
见这里: http://www.iteye.com/topic/481263
|
| 返回顶楼 | |
|
发表时间：2009-10-06
如果是在一个iframe中，iframe的大小小于div，你是怎么处理，
|
| 返回顶楼 | |
|
发表时间：2009-10-06
vb2005xu 写道 在你这个基础之上,我重新写了下代码,增强了如下几个功能...
增加拖拽,浏览器窗口缩放时遮罩层自动缩放等功能 代码请到我的博客下载 感谢你的修改，我已经下载了你修改的代码，完善的功能挺不错，谢谢 |
| 返回顶楼 | |
），看代码吧：
