901web前端博客

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
Theme By 网上下载

联系我

RSS

八月 01, 2014

项目中点击弹出遮罩层引发的思考?

当我们在浏览网页的时候,经常回看到点击点击某个按钮或者超链接,然后弹出一个遮罩层,外面显示相关的内容让你填写或者查看,然后有一个关闭的按钮.特别是某些网站的登录和注册功能爱这么弄.再有空闲时间的时候,我对这个效果进行了相关的测试,并做了一点相关的记录,方便以后查看,现在将其代码贴出来吧.点击运行按钮就可查看效果,主要是css中z-index的层叠顺序,和滤镜的相关的知识点,以及基础的jquery知识点.点击链接查看下效果http://901web.com/Mylab/popmask/default.html | http://901web.com/Mylab/weilver/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Jquery操作复选框!</title>
	<script type="text/javascript" src="http://901web.com/Mylab/lib/jquery-1.10.2.min.js"></script>
	<style type="text/css">
	*{margin:0;padding:0;}
	body{text-align: center;}
	.show{margin:10px auto;width:150px;text-align: center;}
	.mask {background-color: rgb(0, 0, 0);display:none;opacity: 0.7; /* Safari, Opera */-moz-opacity:0.70; /* FireFox */filter: alpha(opacity=70); /* IE */ z-index: 100;height: 100%;width: 100%;background-repeat:repeat;position:fixed;top: 0px;left: 0px;}
	   .plogin{width: 498px;overflow: hidden;border: 1px solid #cfd7df;position: absolute;z-index:101;}
	   .phd{ height:50px;overflow:hidden; background:#ff6b25;}
	   .phd .name{ display:block; float:left; text-align:center; overflow:hidden; line-height:50px; color:#fff; font-weight:bold; font-size:20px; font-family:微软雅黑;text-indent:20px; }
	   .phd .close{ display:block;width:50px;height:50px; background-position:-60px -30px; float:right;line-height:50px;}
	   .pbd{width: 400px;height: 128px;overflow: hidden;padding: 60px;background: #fcfcfc;}
	</style>
	<script type="text/javascript">
	$(function(){

		$('.show').on('click',function() {

			$("#mask").show();
			$(".plogin").show();

		});

		var left = ($(window).width()-498)/2;
		var top = ($(window).height()-300)/2;

		$(".plogin").css({"top":top,"left":left});

		window.onresize = function(){
			var left = ($(window).width()-498)/2;
			var top = ($(window).height()-300)/2;
			$(".plogin").css({"top":top,"left":left});
			console.log($(window).width()+'--'+$(window).height());	
		}

		$('.close').on('click',function() {
			$(".plogin").hide();
			$("#mask").hide();
		})

	})

	</script>
</head>
<body>

	<div id="mask" class="mask"></div>

	<div class="plogin" style="display:none;">

		<div class="phd"><span class="name">弹出层标题部分</span><a href="#" class="close icons" title="关闭">X</a></div>

		<div class="pbd">中间内容部分</div> 

	</div>

	<button class="show">点击显示遮罩层</button>

</body>
</html>

相关文章

返回