js实现在页面上弹出蒙板技巧简单实用

  蒙板是两个div,其中popWindow样式的div用于遮住整个页面,并半透明。maskLayer 在popWindow上面,用于显示蒙板的信息,比如“载入中……“

  

复制代码 代码如下:

  <html>

  <head>

  <style type="text/css">

  .popWindow {

  background-color:#9D9D9D;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  filter: alpha(opacity=50);

  opacity: 0.5;

  z-index: 1;

  position: absolute;

  }

  .maskLayer {

  background-color:#000;

  width: 200px;

  height: 30px;

  line-height: 30px;

  left: 50%;

  top: 50%;

  color:#fff;

  z-index: 2;

  position: absolute;

  text-align:center;

  }

  </style>

  <script language="javascript" type="text/javascript">

  function showDiv() {

  document.getElementById('popWindow').style.display = 'block';

  document.getElementById('maskLayer').style.display = 'block';

  }

  function closeDiv() {

  document.getElementById('popWindow').style.display = 'none';

  document.getElementById('maskLayer').style.display = 'none';

  }

  </script>

  </head>

  <body>

  <div onclick="showDiv()" style="display:block; cursor:pointer">

  弹出蒙板

  </div>

  <div id="popWindow" class="popWindow" style="display: none;">

  </div>

  <div id="maskLayer" class="maskLayer" style="display: none;">

  <a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;">

  关闭蒙板

  </a>

  </div>

  </body>

  </html>