开发学院网页设计 JavaScript javascript弹出一个层并增加一个覆盖层阅读

javascript弹出一个层并增加一个覆盖层

　2010-09-14 13:28:28　来源：WEB开发网　銆�

核心提示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

<!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">运行可以看到效果

<!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> <head> 　　<title>Untitled</title> </head> <body style="height:100%;"> fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf <input name="button2" onclick="ShopConfirm('fdsaf')" value="点我" type="button"/> fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf <input name="button" onclick="ShopConfirm('fdsaf')" value="点我" type="button"/>  <div id="ShopConfirmLayer" style="position:absolute;top:300px;left:100px;z-index:900;border:1px red solid;width:500px;display:none;"> fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf fdasfsdfadf 　　<input name="button1" value="关闭" type="button" onclick="CloseShopConfirm()"/> </div>  <div id="webBgLayer" style="position:absolute;top:0px;left:0px;z-index:899;background-color:#ccc;height:100%;width:100%;display:none;-moz-opacity:0.5;filter:alpha(opacity=50);"></div> <script type="text/javascript"> 　　function ShopConfirm(str){ 　　　　var ShopConfirmLayer=document.getElementById("ShopConfirmLayer"); 　　　　var webBgLayer=document.getElementById("webBgLayer"); 　　 // ShopConfirmLayer.innerHTML=str; 　　　　 ShopConfirmLayer.style.display=""; 　　 ShopConfirmLayer.style.left=parseInt((document.documentElement.scrollWidth-ShopConfirmLayer.offsetWidth)/2)+document.documentElement.scrollLeft+"px"; 　　 ShopConfirmLayer.style.top=Math.abs(parseInt((document.documentElement.clientHeight-ShopConfirmLayer.offsetHeight)/2))+document.documentElement.scrollTop+"px"; 　　 webBgLayer.style.display=""; 　　 webBgLayer.style.height=document.documentElement.scrollHeight+"px"; 　　} 　　function CloseShopConfirm(){ 　　　　var ShopConfirmLayer=document.getElementById("ShopConfirmLayer"); 　　　　var webBgLayer=document.getElementById("webBgLayer"); 　　　　ShopConfirmLayer.style.display="none"; 　　　　webBgLayer.style.display="none"; 　　} </script> </body> </html>