通过JS+CSS实现简单的遮罩层

来源：互联网发布：抓取股票数据网站编辑：程序博客网时间：2024/05/17 01:12

项目遇到数据量比较大的时候，用户导入功能需要增加一个遮罩层。不让用户进行继续的乱操作。

首先，我们先定义一个css样式代码如下：

<style type="text/css">  #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=50);}  #show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;} </style>

颜色深度你可以设置opacity属性的值

在定义js代码如下：

function showdiv() {    document.getElementById("bg").style.display ="block";   document.getElementById("show").style.display ="block";   } function hidediv() {  document.getElementById("bg").style.display ='none';  document.getElementById("show").style.display ='none';  }

页面：

 <input id="btnshow" type="button" value="Show" onclick="showdiv();"/> <div id="bg"></div> <div id="show">请等待 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>

不能随页面的滚动条进行滚动在加上设置长度是滚动条的距离即可

document.getElementById("bg").style.height=document.documentElement.scrollHeight+'px';

0 0