背景半透明例子 ,纯js代码

本文介绍了一个JavaScript函数getPageSize,用于获取当前网页的实际尺寸,并通过DisablePage函数实现了临时禁用页面交互的效果,展示了如何动态调整覆盖层大小以匹配页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


function getPageSize()
{
var body = document.documentElement;
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0,0];
pageDimensions[0]=body.clientHeight;
pageDimensions[1]=body.clientWidth;
bodyOffsetWidth=body.offsetWidth;
bodyOffsetHeight=body.offsetHeight;
bodyScrollWidth=body.scrollWidth;
bodyScrollHeight=body.scrollHeight;
if(bodyOffsetHeight > pageDimensions[0])
{
pageDimensions[0]=bodyOffsetHeight;
}
if(bodyOffsetWidth > pageDimensions[1])
{
pageDimensions[1]=bodyOffsetWidth;
}
if(bodyScrollHeight > pageDimensions[0])
{
pageDimensions[0]=bodyScrollHeight;
}
if(bodyScrollWidth > pageDimensions[1])
{
pageDimensions[1]=bodyScrollWidth;
}
return pageDimensions;
}


function DisablePage()
{
document.write('<div id="cooler_divSandglass" style="position:absolute;Z-INDEX: 9999; left:0; top:0; height:0; width:0; display:none; text-align:center;background:rgba(0,0,0,0.7); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000); "></div>')
var timeHdl;
var ctrlSandglass = document.getElementById("cooler_divSandglass");
var glass_html = ' <div style="margin-top:100px;">'+
' <a href="http://www.fds321.com"><img src="http://127.0.0.1/jordan/static/images/jd.png"/></a>'+
' </div>';
ctrlSandglass.innerHTML=glass_html;
//document.body.style.cursor = 'wait';
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.left = 0;
ctrlSandglass.style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
ctrlSandglass.style.display = "block";
timeHdl = window.setTimeout(function(){ClearDisablePage(timeHdl)},5000);
}
function ClearDisablePage(timeHdl){
var ctrlSandglass = document.getElementById("cooler_divSandglass");
window.clearTimeout(timeHdl);
ctrlSandglass.style.display = "none";
//document.body.style.cursor = 'auto';
}
DisablePage() ;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值