js/div遮罩层实现实例代码,屏蔽网页操作

发布时间:2009年05月19日      浏览次数:1597 次
/////////////////////////////////////////////////////////////////////////////////////
// 精简的代码
/////////////////////////////////////////////////////////////////////////////////////
<style type="text/css">
#divPageMask{ background-color:#000; filter:alpha(opacity=50);left:0px;position:absolute;top:0px; }
#divOpenWin{ background-color:#EEE;position: absolute;left:0px;top:-300px;z-index:50; width:650px; }
#DivInfo{ text-align:center; padding:10px; line-height:18px;}
</style>
<div id="divPageMask"></div><div id="divOpenWin"><center><div id="DivInfo">Lodding......</div></center></div>
<script language="javascript">
function html_display_none(){
      document.getElementById("divPageMask").style.display="block";
      resizeMask();
      window.onResize = resizeMask;
      document.getElementById("divOpenWin").style.display="block";
}
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;
}
html_display_none();
</script>
/////////////////////////////////////////////////////////////////////////////////////
// 原来的代码
/////////////////////////////////////////////////////////////////////////////////////
<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">Lodding...... (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 = "Lodding...... (" + printnr +" 秒后自动关闭)";
}
}
</script>
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!