div上添加遮罩层用于提示信息

下面为完整代码,直接复制的页面即可使用

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <style type="text/css">
    .black_overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: black;
      z-index: 1001;
      -moz-opacity: 0.8;
      opacity: .80;
      filter: alpha(opacity=80);
    }
    .white_content {
      display: none;
      position: fixed;
      top: 20%;
      left: 10%;
      width: 80%;
      height: 50%;
      border: 1px solid black;
      background-color: white;
      z-index: 1002;
      overflow: auto;
    }
    .shut_down{
      text-align: right;
      cursor: default;
      height: 40px;
    }
    .content_show{
      text-align: left;
      padding: 15px;
    }
  </style>
</head>
<body>
  <input id="Button1" type="button" value="按钮" onclick="ShowDiv('MyDiv','fade')" class="button button-color"/>
  <!--弹出层时背景层DIV-->
  <div id="fade" class="black_overlay"  onclick="CloseDiv('MyDiv','fade')">
  </div>
  <div id="MyDiv" class="white_content">
    <div class="shut_down">
      <span style="font-size: 20px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
    </div>
    <div class="content_show">
      提示文字
    </div>
  </div>
</body>
</html>

<script type="text/javascript">
  //弹出隐藏层
  function ShowDiv(show_div, bg_div) {
    document.getElementById(show_div).style.display = 'block';
    document.getElementById(bg_div).style.display = 'block';
    var bgdiv = document.getElementById(bg_div);
    bgdiv.style.width = document.body.scrollWidth;
  };
  //关闭弹出层
  function CloseDiv(show_div, bg_div) {
    document.getElementById(show_div).style.display = 'none';
    document.getElementById(bg_div).style.display = 'none';
  };
</script>

实现效果

来源：CSDN

作者：♪(^∇^*)啦啦

链接：https://blog.csdn.net/qq_42589252/article/details/103748514

标签

遮罩层

div