DIV遮罩層代碼

<style type="text/css">
#divPageMask{background-color:#000000; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;}
#divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:-300px;z-index:50; width:300px;height:150px}
</style>
<div id="divPageMask"></div>
<div id="divOpenWin"><center><a href="javascript:Close();">關閉</a>
<div id="DivInfo">請認真閱讀本發帖說明 (15 秒後自動關閉)</div></center></div>
<script language="javascript">
function $(id){return document.getElementById(id);}
function Open()
{   sDisp(0);  
   $("divPageMask").style.display="block";
   resizeMask();
   window.onResize = resizeMask;
   $("divOpenWin").style.display="block";
}
function Close()
{   sDisp(1);
   divPageMask.style.width = "0px";
   divPageMask.style.height = "0px";
   divOpenWin.style.top = "-300px";
   window.onResize = null;
}
function resizeMask()
{
divPageMask.style.width = document.body.scrollWidth;
divPageMask.style.height = document.body.scrollHeight>document.body.clientHeight?document.body.scrollHeight:document.body.clientHeight;
divOpenWin.style.left = (document.body.offsetWidth - divOpenWin.offsetWidth) / 2;
divOpenWin.style.top = (document.body.offsetHeight - divOpenWin.offsetHeight) / 2;
}
function sDisp(val)
{var dispalyType;
   var dType=["hidden","visible"];
   var obj=document.getElementsByTagName("select");
   for (i=0;i<obj.length;i++)
   {
     obj[i].style.visibility=dType[val];
   }
}
Open();
var secs = 15;
for(i=1;i<=secs;i++) {window.setTimeout("update(" + i + ")",  i*1000);}
function update(num) {
if(num == secs) {Close();}
else {
printnr = secs-num;
$("DivInfo").innerHTML = "請認真閱讀本發帖說明 (" + printnr +" 秒後自動關閉)";
}
}
</script>


這個代碼不是很完善,能實現基本的功能;

另外有個問題,就是divOpenWin層的定位問題:發現如果其屬性設置成display:none,那麼就無法獲取到它的offsetWidth和offsetHeight值。
暫時想到的解決辦法有兩個:
1、就是把top值設置負的高點,效果類似隱藏吧
2、動態定義width和height,在js處理部分直接賦值,這樣修改起來也方便很多 

 
發佈了12 篇原創文章 · 獲贊 1 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章