遮蔽层的实现
效果：http://www.agoit.com/upload/attachment/79302/8312e396-d37f-31b6-bec6-9d033fb488e9.gif
<!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>
页:
[1]