遮蔽层的实现

CoderDream · 发表于 2013-2-7 23:33:42

效果：

<!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-Type" content="text/html; charset=utf-8" /><title>loading demo</title><script type="text/javascript"> function show(){ var loadbox =document.getElementById("loadlayer"); var overlayer = document.getElementById("overlayer"); loadbox.style.display = "block" ; overlayer.style.display = "block" ; } function hide(){ var loadbox =document.getElementById("loadlayer"); var overlayer = document.getElementById("overlayer"); loadbox.style.display = "none" ; overlayer.style.display = "none" ; }</script> <style type="text/css"> #overlayer{ position: absolute; top: 50px; left: 0; z-index: 90; width: 100%; height: 100%; background-color: #000; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; display:none; } #loadbox{ position: absolute; top: 40%; left: 0; width: 100%; z-index: 100; text-align: center; } #loadlayer{ display:none; } </style></head><body><div id="overlayer"></div><div id="loadbox" > <div id="loadlayer"> <img src="loading.gif" /> </div></div> <div id="containlayer"> <input type="button" value="show" /> <input type="button" value="hide" /> <br /> <br /> --------------------------------------------------------------------<br /> --------------------------------------------------------------------<br />这段代码是通过lightbox2.02的源代码里面学习来的,主要要注意的地方是如果用overlayer包裹loadlayer层的话,loadlayer层会继承overlayer层的透明属性,而且这种继承后的透明属性很难屏蔽掉,比如在loadlayer上重新定义透明,新定义的透明不会有预期的效果.所以处理的时候必须要overlayer与loadbox分离来,单独来处理就不会出现上面的情况了. 具体的网页内容.写在这里,上面通过一个半透明层遮蔽下面的内容<br /> </div></body></html>

		自动登录	找回密码
密码			立即注册