明凯博客

关注网站技术，一个特立独行的程序员

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

2013年7月29日 MK CSS 0 阅读 4434次

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

1

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

一个为内容层。属性为

1

position:fixed;z-index:999;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<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创建一个会话框类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<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 onclick="window.neatDialog.close()">关闭</button></p>'; 
    new NeatDialog(content, "标题", false); 
} 
</script> 
<button onclick="openDialog()">点击演示效果</button>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

<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>

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

, , , ,

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


2024 年 12 月
一 二 三 四 五 六 日
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

近期文章

最近读者

    Copyright © 明凯博客 鄂ICP备2023013479号 百度地图 谷歌地图 标签存档 排行榜