用js和css实现遮盖半透明层

最近我做一个项目需要做一个遮盖半透明层。需求就是可以看到层后面的内容，但是不能点击层后面的链接和文本。本来这个问题用两个层z-index很容易解决了。创建两个层。一个为背景层，属性为半透明

opacity:0.50;filter:alpha(opacity=50);z-index=998;

一个为内容层。属性为

position:fixed;z-index:999;

这样在其他的ff以及一些主流的浏览器都是可以显示的。也是非常完美的。但是在ie6下就有问题。ie6不支持fixed属性。对z-index的支持也不是很好。怎么调试也没有用。后来我在网上找了很多种方法。无非就是js和css两种结合实现对ie6的支持。我找了三种方法。在ie6完美实现。当然在ff等也是可以的。
第一种方式。用z-index和js来实现。

<style>
html,body{height:100%;overflow:hidden;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
center{padding-top:10px;}
button{cursor:pointer;}
#b{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
#a{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
h2{font-size:12px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;}
h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
</style>
<script>
window.onload = function ()
{ var oWin = document.getElementById("a"); var oLay = document.getElementById("b"); var oBtn = document.getElementsByTagName("button")[0]; var oClose = document.getElementById("close"); oBtn.onclick = function () { oLay.style.display = "block"; oWin.style.display = "block" }; oClose.onclick = function () { oLay.style.display = "none"; oWin.style.display = "none" }
};
</script>
<div id="b"></div>
<div id="a"><h2><center>标题</center><span id="close">×</span></h2><center>正文内容</center></div>
<center><button>弹出层</button></center>

这种方法相对应比较简单。但是会有点小问题。背景以前的滚动条不能够滚动。当然这个对某些网页没有问题。
第二种方式。用js创建一个会话框类。

<style type=text/css>
HTML {
HEIGHT: 100%
}
BODY {
HEIGHT: 100%
}
BODY {
FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif
}
DIV.neat-dialog-cont {
Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
DIV.neat-dialog-bg {
Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #eee; opacity: 0.7
}
DIV.neat-dialog {
BORDER-RIGHT: #555 1px solid; BORDER-TOP: #555 1px solid; Z-INDEX: 99; MARGIN-LEFT: auto; BORDER-LEFT: #555 1px solid; WIDTH: 30%; MARGIN-RIGHT: auto; BORDER-BOTTOM: #555 1px solid; POSITION: relative; TOP: 25%; BACKGROUND-COLOR: #fff
}
DIV.neat-dialog-title {
PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0.1em; BORDER-BOTTOM: #444 1px solid; POSITION: relative
}
IMG.nd-cancel {
RIGHT: 0.2em; POSITION: absolute; TOP: 0.2em
}
DIV.neat-dialog P {
PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center
}
</style>
<script type=text/javascript>
function NeatDialog(content, sTitle, bCancel)
{
window.neatDialog = null;
this.elt = null;
if (document.createElement && document.getElementById)
{ var dg = document.createElement("div"); dg.className = "neat-dialog"; if (sTitle) content = '<div class="neat-dialog-title">'+sTitle+ ((bCancel)? '<img src="x.gif" alt="Cancel" class="nd-cancel" />':'')+ '</div>\n' + content; dg.innerHTML = content; var dbg = document.createElement("div"); dbg.id = "nd-bdg"; dbg.className = "neat-dialog-bg"; var dgc = document.createElement("div"); dgc.className = "neat-dialog-cont"; dgc.appendChild(dbg); dgc.appendChild(dg); //adjust positioning if body has a margin if (document.body.offsetLeft > 0) dgc.style.marginLeft = document.body.offsetLeft + "px"; document.body.appendChild(dgc); if (bCancel) document.getElementById("nd-cancel").onclick = function() { window.neatDialog.close(); }; this.elt = dgc; window.neatDialog = this;
}
}
NeatDialog.prototype.close = function()
{
if (this.elt)
{ this.elt.style.display = "none"; this.elt.parentNode.removeChild(this.elt);
}
window.neatDialog = null;
}
function openDialog()
{
var content = '<p>正文内容</p>'+ '<p><button οnclick="window.neatDialog.close()">关闭</button></p>'; new NeatDialog(content, "标题", false);
}
</script>
<button onclick="openDialog()">点击演示效果</button>

第三种方法。用js创建一个弹出层div。

<script type="text/javascript">
//弹出层
window.onload = function (){
var arrayPageSize   = getPageSize();//调用getPageSize()函数
var arrayPageScroll = getPageScroll();//调用getPageScroll()函数
if (!document.getElementById("popupAddr")){
//创建弹出内容层
var popupDiv = document.createElement("div");
//给这个元素设置属性与样式
popupDiv.setAttribute("id","popupAddr")
popupDiv.style.position = "absolute";
popupDiv.style.border = "1px solid #ccc";
popupDiv.style.background = "#fff";
popupDiv.style.zIndex = 999;
//创建弹出背景层
var bodyBack = document.createElement("div");
bodyBack.setAttribute("id","bodybg")
bodyBack.style.position = "absolute";
bodyBack.style.width = "100%";
bodyBack.style.height = (arrayPageSize[1] + 35 + 'px');
bodyBack.style.zIndex = 998;
bodyBack.style.top = 0;
bodyBack.style.left = 0;
bodyBack.style.filter = "alpha(opacity=50)";
bodyBack.style.opacity = 0.5;
bodyBack.style.background = "#cccccc";
//实现弹出(插入到目标元素之后)
var mybody = document.getElementById("login");
insertAfter(popupDiv,mybody);//执行函数insertAfter()
insertAfter(bodyBack,mybody);//执行函数insertAfter()
}
//显示背景层
document.getElementById("bodybg").style.display = "";
//显示内容层
var popObj=document.getElementById("popupAddr")
popObj.innerHTML = document.getElementById("login").innerHTML;
popObj.style.display = "";
//让弹出层在页面中垂直左右居中(统一)
// popObj.style.width  = "850px";
// popObj.style.height = "400px";
// popObj.style.top  = arrayPageScroll[1] + (arrayPageSize[3] - 35 - 400) / 2 + 'px';
// popObj.style.left = (arrayPageSize[0] - 20 - 850) / 2 + 'px';
//让弹出层在页面中垂直左右居中(个性)
var arrayConSize=getConSize("login")
popObj.style.top  = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2 + 'px';
popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 + 'px';
}
//获取内容层内容原始尺寸
function getConSize(conId){
var conObj=document.getElementById(conId)
conObj.style.position = "absolute";
conObj.style.left=-1000+"px";
conObj.style.display="";
var arrayConSize=[conObj.offsetWidth,conObj.offsetHeight]
conObj.style.display="none";
return arrayConSize;
}
function insertAfter(newElement,targetElement){//插入
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
//获取滚动条的高度
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}
//获取页面实际大小
function getPageSize(){
var xScroll,yScroll;
if (window.innerHeight && window.scrollMaxY){
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
sScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth,windowHeight;
//var pageHeight,pageWidth;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
var pageWidth,pageHeight
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth) {
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
//关闭弹出层
function closeLayer(){
document.getElementById("popupAddr").style.display = "none";
document.getElementById("bodybg").style.display = "none";
return false;
}
</script>
</script><script type="text/javascript">
//拖拽
//对“拖动点”定义：onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"即可
var move=false,oldcolor,_X,_Y;
function StartDrag(obj){  //定义准备拖拽的函数
obj.setCapture(); //对当前对象的鼠标动作进行跟踪
oldcolor=obj.style.backgroundColor;
obj.style.background="#999";
move=true;
//获取鼠标相对内容层坐标
var parentwin=document.getElementById("popupAddr");
_X=parentwin.offsetLeft-event.clientX
_Y=parentwin.offsetTop-event.clientY
}
function Drag(obj){        //定义拖拽函数
if(move){
var parentwin=document.getElementById("popupAddr");
parentwin.style.left=event.clientX+_X;
parentwin.style.top=event.clientY+_Y;
}
}
function StopDrag(obj){   //定义停止拖拽函数
obj.style.background=oldcolor;
obj.releaseCapture(); //停止对当前对象的鼠标跟踪
move=false;
}
</script>
<div id="login" align="center" style="display:none" >
正文内容
</div>

我用的是第三种方法。因为正文内容可以很方便的更改。其中还有拖曳关闭按钮的功能。经过多种浏览器的测试没有任何问题。

用js和css实现遮盖半透明层相关推荐

【半原创】将js和css文件装入localStorage加速程序执行
首先感谢某某作者写的文章:http://www.jb51.net/article/12793.htm 直接上代码,注意文件名为env.js 原理如下: 一次批量加要加载的文件存入数组,采用Ajax方式 ...
【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值（或者说js是如何主动推送参数给CSS使用的）？
js获取CSS/SCSS/LESS的常量 <template><div id="body"><p>--color: {{ color }}< ...
简短的几句js实现css压缩和反压缩功能
写在前面最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实 ...
ionic中使用Cordova Uglify 压缩js与css
参照:https://www.npmjs.com/package/cordova-uglify 安装:npm install cordova-uglify 安装完成之后,打开: hooks/uglif ...
页面样式乱了，但是又感觉各种js，css都引入了
页面样式乱了,但是又感觉各种js,css都引入了怎么办: 一直不太清楚什么原因: <!DOCTYPE html> <html> <head> <meta c ...
通过js引入当前所需要的js，css等
在我们web前端页面中经常会用到许多外部的js,css文件,那么问题来了,怎样才能一次性引入? 通过js便可实现走码: //创建一个init.js文件 var jsUrls = "js/j ...
Visual Studio 编译任务压缩js和css文件
如今网站都在说优化,压缩js和css文件就成了最基本的一种方法,js和css压缩有很多方法,很多网站也提供了这样的功能,也可以用YUI提供的包手动压缩,但是这都不效率啊,能不能在vs生成部署包的时候把 ...
通过minify将项目中js和css文件的打包
减少http请求数,有三个好处,即减少DNS请求所耗费的时间..减少服务器压力.减少http请求头,因此这是我们前端性能优化的一个关键点. 对于我们前端来说,减少http请求数的一个途径就是合并js和 ...
js、css的阻塞问题
js.css的阻塞问题这篇文章主要是探索js.css的加载顺序及其影响问题. 下面的代码可以让浏览器阻塞: <!DOCTYPE html> <html lang="en& ...

用js和css实现遮盖半透明层

用js和css实现遮盖半透明层相关推荐

最新文章

热门文章