1. Python技术站首页
  2. css

JS+CSS实现Div弹出窗口同时背景变暗的方法

• css
yizhihongxing

实现Div弹出窗口同时背景变暗的方法，通常涉及到以下几个步骤：

1.创建一个基本结构的HTML文件，其中包含一个触发窗口的按钮和一个用于显示弹窗的DIV元素。

<!DOCTYPE html>
<html>
<head>
    <title>弹出窗口示例</title>
    <!-- 在<head>标签中引入CSS文件 -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button id="openBtn">点击弹出窗口</button>
    <div id="modal" class="modal">
        <div class="modal-content">
            <h2>这是一个弹出窗口</h2>
            <p>点击窗口外面的区域或者“关闭按钮”可以关闭窗口</p>
            <button id="closeBtn">关闭</button>
        </div>
    </div>

    <!-- 在<body>标签中引入JS文件 -->
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

2.创建一个CSS文件，用于设置样式，其中包括弹出窗口和背景遮罩层的样式。

/* 弹出窗口 */
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.modal.show {
    opacity: 1;
    visibility: visible;
}

/* 背景遮罩层 */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}

.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

3.创建一个JavaScript文件，用于控制窗口的显示和隐藏，并且在显示窗口时为页面添加背景遮罩层。

var modal = document.getElementById('modal');
var closeBtn = document.getElementById('closeBtn');
var openBtn = document.getElementById('openBtn');
var backdrop = document.createElement('div');
backdrop.className = 'modal-backdrop';

function openModal() {
    backdrop.classList.add('show');
    modal.classList.add('show');
}

function closeModal() {
    backdrop.classList.remove('show');
    modal.classList.remove('show');
}

openBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
backdrop.addEventListener('click', closeModal);

document.body.appendChild(backdrop);

4.将以上三个文件在同一目录下并且在html中引入后，即可调用依然实现该效果。

示例一

HTML文件：

<!DOCTYPE html>
<html>
<head>
    <title>弹出窗口示例</title>
    <!-- 在<head>标签中引入CSS文件 -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button id="openBtn">点击弹出窗口</button>
    <div id="modal" class="modal">
        <div class="modal-content">
            <h2>这是一个弹出窗口</h2>
            <p>点击窗口外面的区域或者“关闭按钮”可以关闭窗口</p>
            <button id="closeBtn">关闭</button>
        </div>
    </div>

    <!-- 在<body>标签中引入JS文件 -->
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS文件：

/* 弹出窗口 */
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.modal.show {
    opacity: 1;
    visibility: visible;
}

/* 背景遮罩层 */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}

.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

JS文件：

var modal = document.getElementById('modal');
var closeBtn = document.getElementById('closeBtn');
var openBtn = document.getElementById('openBtn');
var backdrop = document.createElement('div');
backdrop.className = 'modal-backdrop';

function openModal() {
    backdrop.classList.add('show');
    modal.classList.add('show');
}

function closeModal() {
    backdrop.classList.remove('show');
    modal.classList.remove('show');
}

openBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
backdrop.addEventListener('click', closeModal);

document.body.appendChild(backdrop);

示例二

HTML文件：

<!DOCTYPE html>
<html>
<head>
    <title>弹出窗口示例</title>
    <!-- 在<head>标签中引入CSS文件 -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button id="openBtn">点击弹出窗口</button>
    <div id="modal" class="modal">
        <div class="modal-content">
            <h2>这是一个弹出窗口</h2>
            <p>点击窗口外面的区域或者“关闭按钮”可以关闭窗口</p>
            <button id="closeBtn">关闭</button>
        </div>
    </div>

    <!-- 在<body>标签中引入JS文件 -->
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS文件：

/* 弹出窗口 */
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.modal.show {
    opacity: 1;
    visibility: visible;
}

/* 背景遮罩层 */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}

.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

JS文件：

var modal = document.getElementById('modal');
var closeBtn = document.getElementById('closeBtn');
var openBtn = document.getElementById('openBtn');
var backdrop = document.createElement('div');
backdrop.className = 'modal-backdrop';

function openModal() {
    backdrop.classList.add('show');
    modal.classList.add('show');
}

function closeModal() {
    backdrop.classList.remove('show');
    modal.classList.remove('show');
}

openBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
backdrop.addEventListener('click', closeModal);

document.body.appendChild(backdrop);

这两个示例都显示相似的弹出窗口，但是您可以根据自己的需求更改它们的外观和行为。这只是一个基本的模板，需您自行改进。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+CSS实现Div弹出窗口同时背景变暗的方法 - Python技术站

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

相关文章

  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    实现元素渐隐/渐现可以通过修改元素的CSS透明度来实现。下面是原生JS实现元素渐隐/渐现的攻略： 实现原理 使用原生Javascript实现元素的渐隐/渐现主要是通过修改元素的透明度实现。可以使用CSS的opacity属性来实现元素的透明度，取值范围为0(完全透明)到1(完全不透明)。在Javascript中，可以使用style对象的opacity属性来修改…

    css 2023年6月10日
    00

  • css 边框添加四个角的实现代码

    对于如何添加 CSS 边框的四个角，以下是完整攻略： 1. 使用 border-radius 属性 CSS3 引入了 border-radius 属性，可以用于圆角效果的实现，而 border-radius 同时也可以用于添加边框的四个角。通过设置 border-radius 的值，我们可以使边框的角变为圆角。 /* 实现四个角都为圆角 */ .div { …

    css 2023年6月10日
    00

  • python爬虫开发之PyQuery模块详细使用方法与实例全解

    Python爬虫开发之PyQuery模块详细使用方法与实例全解 概述 PyQuery是Python中一个强大的HTML解析库，类似于jQuery的语法，使用起来非常便利。在Python爬虫开发中，使用PyQuery可以非常方便地对HTML文档进行解析，获取需要的数据。 安装PyQuery 使用pip命令进行安装，安装命令如下： pip install pyq…

    css 2023年6月9日
    00

  • 使用Vue-cli 3.0搭建Vue项目的方法

    使用Vue-cli 3.0搭建Vue项目的方法 Vue-cli 3.0是一款非常强大的Vue.js项目脚手架工具，可以帮助我们快速搭建起一个具备Vue.js开发所需的基础配置的项目框架。本文将详细介绍如何使用Vue-cli 3.0搭建Vue项目的方法。 步骤一：安装Vue-cli 3.0 要使用Vue-cli 3.0，首先需要在本地安装Node.js环境。安…

    css 2023年6月10日
    00

  • 在CSS中使用when/else的方法

    在CSS中，没有像编程语言中的”if/else”和”switch/case”这样的流程控制结构。但是我们可以通过一些技巧和CSS的一些基本属性来实现类似于“when/else”的效果。 一、使用:root和变量 要实现“when/else”的效果可以使用:root伪类和CSS变量。:root会匹配文档根元素,并且我们可以在这里定义一些全局的CSS变量。不同的…

    css 2023年6月10日
    00

  • html 隐藏div HTML里隐藏表格TABLE或者DIV内容的css样式

    要隐藏HTML的div、table或其他内容，可以使用CSS的display属性。 display属性有许多值，最常用的是块元素和内联元素。块元素会显示为一个块，而内联元素则显示为一个行内元素。此外，还有display:none属性，可以完全隐藏元素，这个属性适用于所有元素，包括div元素和表格元素。以下是具体的步骤： 隐藏div元素 可以使用CSS的dis…

    css 2023年6月9日
    00

  • css 解决表格边框不显示的问题

    对于表格边框不显示的问题，我们可以通过 CSS 来解决。以下是一些解决表格边框不显示问题的方式： 1. 设置 border-collapse 属性 当表格的边框不显示时，我们可以在 table 元素中添加 border-collapse: collapse; 属性来解决此问题。例如： table { border-collapse: collapse; } …

    css 2023年6月10日
    00

  • 利用CSS生成精美细线Table表格无需复杂style代码

    以下是利用CSS生成精美细线Table表格无需复杂style代码的攻略，分为以下几个步骤： 1. 准备HTML代码 首先，我们需要准备HTML代码，包括表头和表格内容。例如： <table> <thead> <tr> <th>ID</th> <th>Name</th> &lt…

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