最近想在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的判断问题，如果有人感兴趣可以自己试着做一下
关于用法也很简单，源码我已经上传了下面是效果：
- 大小: 82 KB
分享到：
- 2009-09-06 16:53
- 浏览 2390
- 评论(8)
- 论坛回复 / 浏览 (6 / 16536)
- 查看更多
相关推荐
"ie firefox做了一个遮罩层"这个标题表明我们将讨论如何在Internet Explorer（IE）和Firefox这两个主流浏览器上实现遮罩层的功能。 在Internet Explorer和Firefox中创建一个兼容的遮罩层涉及到CSS和JavaScript的...
在这个例子中，我们需要一个按钮触发遮罩层的显示，并且需要一个遮罩层元素本身： ```html <!DOCTYPE html> , initial-scale=1.0"> <title>JS移动端点击弹出遮罩层 .mask { position: fixed; top: 0; ...
本篇将详细探讨“遮罩层 Js”这一主题，以及如何通过调用一个方法实现自定义的遮罩层功能。 首先，遮罩层在网页中的应用非常广泛，如加载提示、弹窗确认、模态对话框等场景。在JavaScript中实现遮罩层，通常涉及到...
总结，"用iframe做的遮罩层"是一个实用的网页设计技巧，尤其适用于需要独立于页面其他元素的遮罩效果。通过合理的CSS样式和JavaScript交互，可以实现滚动、拖动等高级功能，同时保持代码的简洁性和可维护性。在...
"CSS等待遮罩loading效果（多个）"是一个集合，包含了多个不同的CSS实现的加载动画，旨在为用户提供美观且不单调的加载界面。 CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、Math...
这通常通过添加一个遮罩层（masking layer）和进度条（progressbar）控件来实现。以下是对这个主题的详细讲解： 首先，`loading`是指在应用程序执行耗时操作时显示的视觉指示器，让用户知道程序并未卡死，而是在...
在前端开发中，商品遮罩层是一个常见的交互元素，它用于突出显示某个商品或信息，同时将其他元素暂时隐藏，提供一种聚焦用户体验。本主题主要探讨如何使用Web技术，包括JavaScript、CSS和HTML，来实现商品遮罩层的...
可以使用CSS和HTML创建一个简单的遮罩层，如下： ```html <div id="mask"></div> ``` ```css #mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, ...
在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意个。 2. 遮罩的用途 在 Flash 8.0 动画中，“遮罩”主要有两种用途，一种是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，...
当一个图层被设定为遮罩层时，它会像一个剪纸窗花一样，只有与遮罩层形状重叠的部分才会显示出来。这在创建各种视觉效果，如局部显示、动态窗口、隐藏和揭示内容等场景中十分常见。 引导层与遮罩层的结合使用可以...
在网页开发中，有时我们需要创建一个遮罩层或者弹出框来提示用户或者阻止用户与页面其他部分的交互，这就是“基于jQuery的BlockUI”插件所做的事情。BlockUI是一款非常实用的jQuery插件，它能够方便地实现页面区域的...
在iOS开发中，遮罩层（Mask Layer）是一种常见的用户界面设计元素，它通常用于在屏幕上覆盖一层半透明或全透明的颜色，以...这个简单的实现为开发者提供了一个基础的遮罩层解决方案，可以根据项目需求进行扩展和优化。
这些组件通常需要一个遮罩层来提供更好的用户体验，确保用户专注于当前操作而不会被其他界面元素干扰。在C#中，我们可以利用Popup类来创建这样的功能。Popup类是Windows Phone SDK提供的一种轻量级的弹出控件，它...
"点击图片弹出遮罩层加载大图"是一个常见的功能，它为用户提供了一个优雅的方式来预览图片，尤其在移动端和PC端的混合场景中。这个功能允许用户在点击小图后，通过弹出的遮罩层快速查看大图，而不会离开当前页面或...
JQuery遮罩层登录界面源码 测试浏览器：IE8、FF3.6.8、Google Chrome （IE8中弹出登录层后会出现竖拉条，其他两种没有出现，那个竖拉条可以在JS中通过修改数值让其不出现，但是下面会出现白边） 点击登录显示登录...
是一个有遮罩效果的fla文件，通过做遮罩层来达到效果。闪光棒经过时或有变成不同的颜色。
曲面（弧面、柱面）展平（拉直）需要自己做一个遮罩层 此代码主要是为了方便嫁接使用 自己用视觉算法识别遮罩即可进行嫁接 里面代码去掉了原始程序对gpu的依赖（即自动检测遮罩层位置，所以需要自己做遮罩层） 如果...
要创建一个遮罩层，我们需要做以下几步： 1. **设计遮罩层组件**：首先，创建一个新的WinForm窗体作为遮罩层。设置窗体的属性，例如：`Opacity`来调整透明度（0到1之间，0完全透明，1完全不透明），`...
`openDiv.js`是一个轻量级的JavaScript库，专门用于快速构建遮罩层效果，其核心思想是通过简单的API调用来实现复杂的效果，从而减轻开发者的工作负担。 首先，`openDiv.js`的核心概念是创建一个覆盖整个页面的div...
网站上线或者改版的时候，常常会做一个操作向导，告诉用户一些重要操作到了哪里，或者什么地方隐藏了什么好玩的东西，等等，虽然我都是直接关掉的，或者快速跳过，但是对有部分用户而言还是很有用的。初始化时只需$....