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

最新推荐文章于 2024-04-27 21:55:17 发布

♪(^∇^*)啦啦

最新推荐文章于 2024-04-27 21:55:17 发布

阅读量270

点赞数 1

分类专栏：前端文章标签： html jquery

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

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

<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>

实现效果

♪(^∇^*)啦啦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div上添加遮罩层用于提示信息

下面为完整代码,直接复制的页面即可使用<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <style typ...
复制链接

扫一扫