码迷,mamicode.com
首页 > Web开发 > 详细

js+html实现遮罩层效果(收藏哦)

时间:2015-07-09 19:56:33      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

<span style="font-size:14px;"><span style="font-size:18px;"><strong>//遮罩
	function coverDiv(){
		var procbg = document.createElement("div"); //首先创建一个div
		procbg.setAttribute("id","mybg"); //定义该div的id
		procbg.style.background = "#000000";
		procbg.style.width = "100%";
		procbg.style.height = "100%";
		procbg.style.position = "fixed";
		procbg.style.top = "0";
		procbg.style.left = "0";
		procbg.style.zIndex = "500";
		procbg.style.opacity = "0.6";
		procbg.style.filter = "Alpha(opacity=70)";
		document.body.appendChild(procbg);
	}
	//取消遮罩
	function hide() {
		/* document.getElementById('light').style.display="none"; */
		$("div[class='xucun_content']").hide();
		var body = document.getElementsByTagName("body");
		var mybg = document.getElementById("mybg");
		body[0].removeChild(mybg);
	}</strong></span>
解释:实现的方式很简单,就是动态创建一个div,设置的背景颜色等等,如果你是弹出一个框框,并且在框没有关闭之前是不能操作父级元素的,那么你就可以让你的框和这个遮罩div同时显示,而只需要设置他们的z-index样式,来选择谁在上在下的顺序,就可以啦!
欢迎加入Java交流群:398918539</span>

版权声明:本文为博主原创文章,未经博主允许不得转载。

js+html实现遮罩层效果(收藏哦)

标签:

原文地址:http://blog.csdn.net/u010407050/article/details/46819875

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!