1. Python技术站首页
  2. css

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

• css

实现弹出居中背景半透明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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手

    HTML+CSS盒模型是网页设计中非常重要的一个概念，了解盒模型对于网页布局和样式的掌控有着十分关键的作用。其中“border-radius”属性是用于创建各种圆角的CSS属性。下面将在这个主题下，提供一个简单的上手攻略，来实现几个有趣的案例。 HTML+CSS 圆形盒子 实现一个简单的圆形盒子非常简单，我们只需要在CSS代码中添加“border-radiu…

    css 2023年6月10日
    00

  • 创建图片对比slider滑块示例详解

    创建图片对比 slider 滑块示例的详细攻略如下： 1. 准备工作 首先，创建一个带有图片的 HTML 元素（通常是 或 ），设置它们的宽度、高度、背景和位置等样式属性。具体来说，需要创建两个元素（比如说A和B），它们的位置要重叠在一起，并且其中一个的 opacity 设置为0，如下所示： <div class="image-contain…

    css 2023年6月10日
    00

  • CSS实现限制字数功能当对象内文本溢出时显示省略标记

    实现限制字数并且在对象内文本溢出时显示省略标记，可以使用CSS中的text-overflow和white-space属性来实现。 text-overflow用来设置超过容器宽度时的显示方式，可以有三个属性值： clip：溢出部分将被剪切，不显示省略号 ellipsis：溢出部分显示省略号 string：溢出部分显示自定义字符，需要通过content属性指定 …

    css 2023年6月10日
    00

  • jQuery Validate表单验证插件的基本使用方法及功能拓展

    jQuery Validate表单验证插件基本使用方法 jQuery Validate是一款小巧而功能强大的表单验证插件。它可以提供简单易用的验证规则，并且支持自定义检验函数和错误信息。下面是详细的使用方法。 安装jQuery Validate 在使用jQuery Validate之前，要先在页面中引入jQuery库和jQuery Validate插件。假设…

    css 2023年6月9日
    00

  • html页面中常用的一些小方法整理

    在 HTML 页面中，有许多常用的小方法可以提高页面的可读性和可维护性。下面整理了一些常用的小方法，包括示例说明和代码实现。 方法一：使用 meta 标签设置页面编码 可以使用 meta 标签来设置页面的编码，以便浏览器正确地解析页面内容。具体方法是在 head 标签中添加如下代码： <meta charset="UTF-8"&gt…

    css 2023年5月18日
    00

  • HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影

    这个话题比较复杂，需要细致的讲解，下面为您详细讲解“HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影”的完整攻略。 一、瀑布流布局 瀑布流布局的关键在于如何优化瀑布流项的位置，使得页面整体布局效果更佳。以下是基于html5和CSS实现的瀑布流布局的示例代码，我们可以通过修改CSS代码，改变展示的效果。 <!DOCTYPE html> &l…

    css 2023年6月11日
    00

  • CSS3 rgb and rgba（透明色）的使用详解

    以下是关于“CSS3 rgb 和 rgba（透明色）的使用详解”的完整攻略。 一、什么是rgb和rgba RGB 和 RGBA 是一组颜色模式，RGB 表示红色、绿色和蓝色，RGBA 跟 RGB 模式同样表示红色、绿色和蓝色，只不过多了一个透明度的参数。 RGB：由红色值（R）、绿色值（G）和蓝色值（B）组成的颜色表示方式。 RGBA：由红色值（R）、绿色值…

    css 2023年6月9日
    00

  • CSS3 Backgrounds属性相关介绍

    CSS3 Backgrounds属性相关介绍 CSS Backgrounds模块定义了一些有关背景的属性，使得开发者能够更加灵活地美化他们的网站。本文将介绍CSS3 Backgrounds属性及其用法。 1. background-color background-color 属性定义元素的背景颜色。例如，下面的代码将一个div元素的背景颜色设置为红色： d…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部