工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果,非常好用。。。。。。只把关键代码贴出来。并实现了点击空白处隐藏弹出层效果。
js代码如下:
	<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代码:
.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代码:
<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>
点击查看更多内容
					为 TA 点赞
										
				 评论
				共同学习,写下你的评论
评论加载中...
作者其他优质文章
					正在加载中
				
			感谢您的支持,我会继续努力的~
		扫码打赏,你说多少就多少
		赞赏金额会直接到老师账户
		支付方式
		打开微信扫一扫,即可进行扫码打赏哦
	 
                 
             
			 
					 
					