简单的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