工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果，非常好用。。。。。。只把关键代码贴出来。并实现了点击空白处隐藏弹出层效果。
js代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script type=
"text/javascript"
>
$(document).ready(
function
(){
$(
".tkyy"
).click(
function
(event){
event.stopPropagation();
//停止事件冒泡
$(
".marsk-container"
).toggle();
});
//点击空白处隐藏弹出层
$(
".marsk-container"
).click(
function
(event){
var
_con = $(
'.tkyy_con'
);
// 设置目标区域
if
(!_con.is(event.target) && _con.has(event.target).length ==0){
$(
'.marsk-container'
).hide();
//淡出消失
}
});
});
</script>
|
css代码：
|
1
|
.marsk-container{
background
:
#FFFFFF
;
display
:
none
;
position
:
absolute
;
position
:
fixed
;
top
:
0
;
right
:
0
;
left
:
0
;
bottom
:
0px
;
background
: rgba(
0
,
0
,
0
,.
5
);
z-index
:
10
; }
|
html代码：
|
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
|
<
div
class
=
"tkyy"
><
span
class
=
"mui-icon mui-icon-arrowdown"
></
span
>请选择退款类型 </
div
>
<
div
class
=
"marsk-container"
>
<
div
class
=
"tkyy_con"
>
<
div
class
=
"mui-input-row mui-radio "
>
<
label
>退运费</
label
>
<
input
name
=
"radio"
type
=
"radio"
checked>
</
div
>
<
div
class
=
"mui-input-row mui-radio "
>
<
label
>收到商品破损</
label
>
<
input
name
=
"radio"
type
=
"radio"
checked>
</
div
>
<
div
class
=
"mui-input-row mui-radio "
>
<
label
>少件/漏发</
label
>
<
input
name
=
"radio"
type
=
"radio"
checked>
</
div
>
<
div
class
=
"mui-input-row mui-radio "
>
<
label
>商品需要维修</
label
>
<
input
name
=
"radio"
type
=
"radio"
checked>
</
div
>
<
div
class
=
"mui-input-row mui-radio "
>
<
label
>发票问题</
label
>
<
input
name
=
"radio"
type
=
"radio"
checked>
</
div
>
<
div
class
=
"mui-input-row mui-radio "
>
<
label
>收到商品与描述不符</
label
>
<
input
name
=
"radio"
type
=
"radio"
checked>
</
div
>
<
div
class
=
"mui-input-row mui-radio "
>
<
label
>商品质量问题</
label
>
<
input
name
=
"radio"
type
=
"radio"
checked>
</
div
>
<
div
class
=
"mui-input-row mui-radio "
>
<
label
>描述问题</
label
>
<
input
name
=
"radio"
type
=
"radio"
checked>
</
div
>
</
div
>
</
div
>
|
效果如图：
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1792463
