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日

相关文章

  • CSS3的颜色渐变效果的示例代码

    当要给网站添加对颜色的操作时，CSS3提供了许多强大的技术。其中一个是使用渐变色来实现更具艺术性的网页设计。 渐变的类型 CSS3提供了两种类型的颜色渐变：线性渐变和径向渐变。 线性渐变 线性渐变是使用两个或更多颜色的渐进色来填充一个区域的方式。它们沿着一条线或者角度渐进地混合到一起。 以下是一个简单的线性渐变示例： #gradient { backgrou…

    css 2023年6月9日
    00

  • 纯CSS实现鼠标悬停提示的方法

    “纯CSS实现鼠标悬停提示的方法”是一种常用的前端技术，它可以使网站更美观，更易用，本文将详细讲解如何实现。 什么是鼠标悬停提示？ 鼠标悬停提示是指当用户把鼠标放在一个元素上时，自动弹出一个提示框来提示用户相关信息。 用法 要使用鼠标悬停提示，我们需要使用CSS的:hover选择器来实现。 实现方法 方法一： 使用title属性 a:hover::after…

    css 2023年6月10日
    00

  • jQuery+CSS3折叠卡片式下拉列表框实现效果

    下面我将详细讲解一下“jQuery+CSS3折叠卡片式下拉列表框实现效果”的完整攻略。 概述 本攻略旨在介绍如何利用jQuery和CSS3实现一个折叠卡片式下拉列表框，该下拉列表框可以自定义标题和内容，并支持展开和收缩。 实现步骤 编写HTML结构 首先在HTML文件中插入下面的代码，该代码表示一个折叠卡片式下拉列表框的基本结构： <div class…

    css 2023年6月10日
    00

  • HTML九宫格布局实现方法

    下面是HTML九宫格布局实现方法的完整攻略。 HTML九宫格布局实现方法 什么是九宫格布局？ 九宫格布局指将一个页面或者一个区域按照九宫格的形式进行划分，每一个区域都可以放置不同的内容，通常用于制作网站的首页或者某些特定的页面。 实现九宫格布局的方法 方法一：使用表格布局 表格布局是一种简单实用的布局方式，通过设置表格的行和列的数量以及宽度和高度可以轻松地实…

    css 2023年6月11日
    00

  • Vue中使用Tailwind CSS的具体方法

    当我们使用Vue.js进行前端开发时，很多时候我们需要使用CSS框架来提高开发效率并实现更漂亮的界面。而Tailwind CSS是一款基于Utility-First（以下简称UF）设计的CSS框架，可以让我们快速地构建HTML界面。本文将介绍如何在Vue项目中使用Tailwind CSS。 1. 安装Tailwind CSS 首先，我们需要在Vue项目中安装…

    css 2023年6月10日
    00

  • 详解css position 5种不同的值的用法

    详解CSS Position 5种不同的值的用法 在CSS中，position属性用于指定一个元素在文档中的定位方式。这个属性可以取5个值，包括： static relative absolute fixed sticky 接下来，我们将逐个介绍这5种值的用法。 1. static static是position属性的默认值，表示元素在文档中的位置使用正常的…

    css 2023年6月9日
    00

  • 详解Css3新特性应用之过渡与动画

    详解Css3新特性应用之过渡与动画 1. 什么是CSS3过渡？ CSS3过渡是一种在元素样式发生改变时，为这些改变应用一个动画效果的技术。在样式属性的值从一个状态转变到另一个状态时，这种技术可以逐渐地改变样式属性值，而不是瞬间改变。过渡可以应用于多种样式属性，如颜色、位置、大小、形状、透明度等。通过过渡技术，我们可以创建出更流畅、更美观的界面效果。 1.1 …

    css 2023年6月10日
    00

  • 详解CSS 怪异盒模型和标准盒模型

    详解CSS 怪异盒模型和标准盒模型 盒模型基础知识 CSS的盒模型是用来解释HTML文档中元素的布局的基本概念。任何元素都被认为是一个盒子，盒子由四个部分组成：外边距(margin)、边框(border)、内边距(padding)和内容(content)。 盒子的宽度和高度是由这四个部分的大小及其组成顺序来定义的。 在CSS标准之前，盒模型存在两种不同的模型…

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