弹出层，半透明蒙层提示的实现办法
这些天一直在做弹出层的设计，原理在明白之后很好下手！主要技术要点就是：
1.弹出层的绝对定位，这主要有跨浏览器鼠标位置的获取技术，CSS：z-index定位。
2.动态控制弹出Div的各种属性。
3.弹出窗口位置的计算，主要是在有蒙版层的里面，居中的问题。
4.各种弹出效果和动画。
先给出普通弹出层的代码：
1
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
2
$(
function
(){
3
$(
"
#ele1
"
).click(
function
(ev){
4
var
evs
=
ev
||
window.event;
5
var
XYposition
=
mousePosition(evs);
6
var
X
=
XYposition.x;
7
var
Y
=
XYposition.y;
8
$(
'
#blk1
'
).css(
"
opacity
"
,
"
0
"
).css(
"
left
"
,
''
+
X
+
'
px
'
).css(
"
top
"
,
''
+
Y
+
'
px
'
);
9
$(
'
#blk1
'
).animate({width:
"
200px
"
,height:
"
200px
"
,opacity:
"
1
"
},
3000
);
10
})
11
$(
"
#close1
"
).click(
function
(){
12
$(
'
#blk1
'
).stop().animate({width:
"
0px
"
,height:
"
0px
"
,opacity:
"
0
"
,left:
"
0px
"
,top:
"
0px
"
},
300
);
13
})
14
15
});
16
17
//
鼠标位置
18
function
mousePosition(ev){
19
if
(ev.pageX
||
ev.pageY){
20
return
{x:ev.pageX, y:ev.pageY};
21
}
22
return
{
23
x:ev.clientX
+
document.body.scrollLeft
-
document.body.clientLeft,
24
y:ev.clientY
+
document.body.scrollTop
-
document.body.clientTop
25
};
26
}
27
28
<
/
script>
带蒙版：
JavaScript
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
$(
function
(){
$(
"
#ele1
"
).click(
function
(ev){
//
蒙版层
var
CoverAll
=
getViewportInfo();
var
W
=
CoverAll.w;
var
H
=
CoverAll.h;
$(
'
#all
'
).css(
"
opacity
"
,
"
0.3
"
).css(
"
width
"
,
''
+
W
+
'
px
'
).css(
"
height
"
,
''
+
H
+
'
px
'
);
//
弹出层
var
X
=
(W
-
300
)
/
2;
var
Y
=
(H
-
200
)
/
2;
$(
'
#blk1
'
).css(
"
opacity
"
,
"
0
"
).css(
"
left
"
,
''
+
W
/
2+'').css("top",''+H
/
2
+
''
);
$(
'
#blk1
'
).animate({width:
"
300px
"
,height:
"
200px
"
,left:
''
+
X
+
''
,top:
''
+
Y
+
''
,opacity:
"
1
"
},
3000
,
function
(){$(
'
#hideDiv
'
).show();});
})
//
关闭按钮
$(
'
#close1
'
).click(
function
(){
$(
'
#blk1
'
).stop().animate({width:
"
0px
"
,height:
"
0px
"
,opacity:
"
0
"
},
300
);
$(
'
#all
'
).stop().animate({width:
"
0px
"
,height:
"
0px
"
,opacity:
"
0
"
,left:
"
0px
"
,top:
"
0px
"
},
100
);
})
});
//
蒙版的尺寸
function
getViewportInfo()
{
var
w
=
(window.innerWidth)
?
window.innerWidth : (document.documentElement
&&
document.documentElement.clientWidth)
?
document.documentElement.clientWidth : document.body.offsetWidth;
var
h
=
(window.innerHeight)
?
window.innerHeight : (document.documentElement
&&
document.documentElement.clientHeight)
?
document.documentElement.clientHeight : document.body.offsetHeight;
return
{w:w,h:h};
};
<
/
script>
具体就不解释了，注释很充分，大家可以自己运行一下！