js+CSS实现弹出居中背景半透明div层的方法

实现弹出居中背景半透明div层的方法基本思路是利用CSS实现半透明背景层，利用JavaScript控制弹框层的显示和隐藏并使其在页面居中。

1. 编写HTML结构

首先，在HTML中添加弹框层的结构，例如：

<div id="mask"></div>
<div id="dialog">
  <div class="title">标题</div>
  <div class="content">内容</div>
  <div class="btns">
    <a href="javascript:;" class="btn btn-ok">确定</a>
    <a href="javascript:;" class="btn btn-cancel">取消</a>
  </div>
</div>

其中，mask是半透明背景层，dialog是弹框层，title是标题部分，content是内容部分，btns是操作按钮组。

2. 利用CSS实现半透明背景层

半透明背景层可以使用position: fixed属性实现，然后设置背景颜色和透明度即可，例如：

#mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  background-color: #000;
  opacity: 0.5;
}

其中，top、left、width、height设置为100%，可以使半透明背景层覆盖整个页面；z-index是设置层级，使其在弹框层之下；background-color是设置背景颜色；opacity是设置透明度。

3. 利用JavaScript控制弹框层的显示和隐藏

在JavaScript中，需要控制弹框层的显示和隐藏，并计算使其居中的位置。

3.1 控制显示和隐藏

我们可以使用display属性控制弹框层的显示和隐藏，当需要显示时，设置display为block，当需要隐藏时，设置display为none。例如：

// 显示弹框层
document.getElementById('mask').style.display = 'block';
document.getElementById('dialog').style.display = 'block';

// 隐藏弹框层
document.getElementById('mask').style.display = 'none';
document.getElementById('dialog').style.display = 'none';

3.2 计算居中位置

为了使弹框层居中，我们需要计算其坐标值。具体计算方式如下：

var dialog = document.getElementById('dialog');
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var dialogWidth = dialog.offsetWidth;
var dialogHeight = dialog.offsetHeight;
var left = (screenWidth - dialogWidth) / 2 + scrollLeft;
var top = (screenHeight - dialogHeight) / 2 + scrollTop;

dialog.style.left = left + 'px';
dialog.style.top = top + 'px';

其中，screenWidth、screenHeight表示浏览器窗口的宽度和高度；scrollLeft、scrollTop表示窗口的滚动距离；dialogWidth、dialogHeight是弹框层的宽度和高度。

示例1：点击按钮弹出居中背景半透明div层

下面是一个简单的示例，点击按钮即可弹出居中背景半透明div层。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例1：点击按钮弹出居中背景半透明div层</title>
  <style>
    #mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9998;
      background-color: #000;
      opacity: 0.5;
    }
    #dialog {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 9999;
      transform: translate(-50%,-50%);
      border: 1px solid #ccc;
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    #dialog .title {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    #dialog .btns {
      text-align: right;
      margin-top: 10px;
    }
    #dialog .btns .btn {
      display: inline-block;
      margin-left: 10px;
      padding: 5px 10px;
      border: 1px solid #666;
      border-radius: 4px;
      color: #666;
      text-decoration: none;
      background-color: #eee;
      transition: all 0.3s ease-in-out;
    }
    #dialog .btns .btn:hover {
      color: #fff;
      background-color: #666;
    }
  </style>
</head>
<body>
  <button id="btn">点击弹出</button>
  <div id="mask"></div>
  <div id="dialog">
    <div class="title">标题</div>
    <div class="content">内容</div>
    <div class="btns">
      <a href="javascript:;" class="btn btn-ok">确定</a>
      <a href="javascript:;" class="btn btn-cancel">取消</a>
    </div>
  </div>
  <script>
    var btn = document.getElementById('btn');
    var mask = document.getElementById('mask');
    var dialog = document.getElementById('dialog');

    btn.onclick = function() {
      mask.style.display = 'block';
      dialog.style.display = 'block';
      var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var dialogWidth = dialog.offsetWidth;
      var dialogHeight = dialog.offsetHeight;
      var left = (screenWidth - dialogWidth) / 2 + scrollLeft;
      var top = (screenHeight - dialogHeight) / 2 + scrollTop;
      dialog.style.left = left + 'px';
      dialog.style.top = top + 'px';
    };

    dialog.querySelectorAll('.btn').forEach(function(btn) {
      btn.onclick = function() {
        mask.style.display = 'none';
        dialog.style.display = 'none';
      };
    });
  </script>
</body>
</html>

示例2：页面加载时弹出居中背景半透明div层

下面是另一个示例，页面加载时即可弹出居中背景半透明div层。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例2：页面加载时弹出居中背景半透明div层</title>
  <style>
    #mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9998;
      background-color: #000;
      opacity: 0.5;
    }
    #dialog {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 9999;
      transform: translate(-50%,-50%);
      border: 1px solid #ccc;
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    #dialog .title {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    #dialog .btns {
      text-align: right;
      margin-top: 10px;
    }
    #dialog .btns .btn {
      display: inline-block;
      margin-left: 10px;
      padding: 5px 10px;
      border: 1px solid #666;
      border-radius: 4px;
      color: #666;
      text-decoration: none;
      background-color: #eee;
      transition: all 0.3s ease-in-out;
    }
    #dialog .btns .btn:hover {
      color: #fff;
      background-color: #666;
    }
  </style>
</head>
<body>
  <div id="mask"></div>
  <div id="dialog">
    <div class="title">标题</div>
    <div class="content">内容</div>
    <div class="btns">
      <a href="javascript:;" class="btn btn-ok">确定</a>
      <a href="javascript:;" class="btn btn-cancel">取消</a>
    </div>
  </div>
  <script>
    var mask = document.getElementById('mask');
    var dialog = document.getElementById('dialog');

    window.onload = function() {
      mask.style.display = 'block';
      dialog.style.display = 'block';
      var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var dialogWidth = dialog.offsetWidth;
      var dialogHeight = dialog.offsetHeight;
      var left = (screenWidth - dialogWidth) / 2 + scrollLeft;
      var top = (screenHeight - dialogHeight) / 2 + scrollTop;
      dialog.style.left = left + 'px';
      dialog.style.top = top + 'px';
    };

    dialog.querySelectorAll('.btn').forEach(function(btn) {
      btn.onclick = function() {
        mask.style.display = 'none';
        dialog.style.display = 'none';
      };
    });
  </script>
</body>
</html>

以上两个示例都实现了弹出居中背景半透明div层的方法，2个示例代码的区别为一个是"页面加载时"弹出一个是"点击按钮"弹出的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js+CSS实现弹出居中背景半透明div层的方法 - Python技术站