javascript彈出一個層并增加一個覆蓋層

更新時間：2008年10月10日 23:14:41 作者：

彈出一個層的js代碼，比較不錯

<!--內(nèi)容層--> 
<div id="ShopConfirmLayer" style="position:absolute;top:300px;left:100px;z-index:900;border:1px red solid;width:500px;display:none;"> 
<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> 

注意上面的代碼頭部DTD應該是這樣：

復制代碼代碼如下:

<!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 fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadf <input name="button2" onclick="ShopConfirm('fdsaf')" value="點我" type="button"/> fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf <input name="button" onclick="ShopConfirm('fdsaf')" value="點我" type="button"/>  <div   class="wppm3vysvbp"   id="ShopConfirmLayer" style="position:absolute;top:300px;left:100px;z-index:900;border:1px red solid;width:500px;display:none;">     fdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadffdasfsdfadf     <input name="button1" value="關閉" type="button" onclick="CloseShopConfirm()"/> </div>  <div   class="wppm3vysvbp"   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>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: