本文共 2071 字，大约阅读时间需要 6 分钟。
工作中自己写了一个简单的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
转载地址：http://iqlhx.baihongyu.com/