使用半透明的DIV实现禁用页面功能

最新推荐文章于 2021-06-20 22:17:56 发布

weixin_33697898

最新推荐文章于 2021-06-20 22:17:56 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qqflying/archive/2008/02/16/1070799.html

本文介绍了一种使用HTML和CSS实现弹出提示等待信息的DIV层，并同时禁用页面其他部分交互的方法。通过设置特定样式属性，使得提示框居中显示且不可交互，并覆盖全屏DIV防止用户误操作。

实现功能：弹出一个DIV层提示等待信息，这个时候禁用用户操作页面中的其他内容。
弹出DIV:

< div id ="divWaiting" style ="display: none; z-index: 1100; left: 25%; right: 25%; position: absolute;

text-align: center; width: 50%; height: 50px; border-right: #009900 1px solid;

border-top: #009900 1px solid; border-left: #009900 1px solid; border-bottom: #009900 1px solid;

background-color: #f9fff6; left: expression((this.offsetParent.clientWidth/2)-(this.clientWidth/2)+this.offsetParent.scrollLeft);

top: expression((this.offsetParent.clientHeight/2)-(this.clientHeight/2)+this.offsetParent.scrollTop);" >

< br >

The system is dealing with your request, please waiting

</ div >

弄一个全屏的DIV来覆盖页面：

< div id ="divDisable" style ="display: none;width:expression(document.body.offsetWidth);height:expression(document.body.offsetHeight); z-index: 1000; position: absolute;left: 0px; top: 0px;filter:alpha(opacity=50); background-color:White" ></ div >

点击按钮的操作：

document.getElementById("divWaiting").style.display="";

document.getElementById("divDisable").style.display="";

其他处理：

function ChangeDiv()

{

document.getElementById("divDisable").style.height=document.body.offsetHeight+document.body.scrollTop;

}

window.onscroll=ChangeDiv;

转载于:https://www.cnblogs.com/qqflying/archive/2008/02/16/1070799.html