工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果，非常好用。。。。。。只把关键代码贴出来。并实现了点击空白处隐藏弹出层效果。

js代码如下：

<scripttype="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代码：

.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代码：

<divclass="tkyy"><spanclass="mui-iconmui-icon-arrowdown"></span>请选择退款类型</div><divclass="marsk-container"><divclass="tkyy_con"><divclass="mui-input-rowmui-radio"><label>退运费</label><inputname="radio"type="radio"checked></div><divclass="mui-input-rowmui-radio"><label>收到商品破损</label><inputname="radio"type="radio"checked></div><divclass="mui-input-rowmui-radio"><label>少件/漏发</label><inputname="radio"type="radio"checked></div><divclass="mui-input-rowmui-radio"><label>商品需要维修</label><inputname="radio"type="radio"checked></div><divclass="mui-input-rowmui-radio"><label>发票问题</label><inputname="radio"type="radio"checked></div><divclass="mui-input-rowmui-radio"><label>收到商品与描述不符</label><inputname="radio"type="radio"checked></div><divclass="mui-input-rowmui-radio"><label>商品质量问题</label><inputname="radio"type="radio"checked></div><divclass="mui-input-rowmui-radio"><label>描述问题</label><inputname="radio"type="radio"checked></div></div></div>

效果如图：