简单的jquery点击弹出背景变暗遮罩效果
工作中自己写了一个简单的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