简单的jquery点击弹出背景变暗遮罩效果

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

js代码如下:

	<script type="text/javascript">
 $(document).ready(function(){
  $(".tkyy").click(function(event){
  	  event.stopPropagation(); //停止事件冒泡
  	$(".marsk-container").toggle();
  });
  //点击空白处隐藏弹出层
	 $("body").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>				

效果如图:

时间: 2024-12-14 07:10:31

简单的jquery点击弹出背景变暗遮罩效果的相关文章

jquery制作弹出层带遮罩效果,点击阴影部分层消失

jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 1 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a> 2 <div id="myModal" class="reveal-modal&quo

点击弹出居中的遮罩层,背景变暗

点击弹出层特效代码,网页上已经有很多类似的代码了,使用挺广泛的,代码先判断浏览器的版本,ie6创建的div样式和非ie6创建的div样式在解析时有点区别,为了兼容性考虑,才加了判断,虽然实现的有点粗糙,不过从实现的方法来说,容易理解,便于修改完善. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

jQuery点击弹出层,弹出模态框,点击模态框消失

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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

页面弹框背景变暗的效果

<html> <head> <title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"

jquery 点击弹出层自身以外的任意位置,关闭弹出层

<!--弹出层---> <div class="mask">    <div class="wrap"></div> </div> /***弹出层效果***/ $(".header").find(".a5").click(function(e){ e.stopPropagation();//阻止冒泡 $('.mask').css("display"

popupWindow弹出窗口的完美实现(实现弹出背景变暗效果)

最近尝试使用popupWindow实现背景变暗效果,自己优化了一下,并封装成一个可以调用的方法,默认实现弹出窗口显示在传入view的下方,以下代码有详细注释,有问题可以留言 展示效果如下: /** * 我封装的这个popupwindow的方法, * 第一个参数是他要显示在哪个控件下面 * 第二个参数是要填充到popupWindow中的布局文件id * 第三个参数是要给popupWindow设置的背景资源id */ private void showPopWindow(View v,int con

基于jQuery鼠标点击弹出登陆框效果

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo

jquery之点击弹出图标环形菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

点击弹出居中带有透明遮罩层窗口

点击弹出居中带有透明遮罩层窗口:本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt