1. Python技术站首页
  2. css

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

• css

实现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日

相关文章

  • 一个JavaScript的求爱小特效

    现在我将详细讲解如何实现一个JavaScript的求爱小特效。 实现思路 我们可以利用HTML、CSS和JavaScript来实现这个小特效。具体实现过程如下： 首先，在HTML文件中添加两个input标签分别用于输入男方和女方的名字，以及一个button标签用于触发求爱动画； 然后，使用CSS样式来美化输入框和按钮的样式； 接着，使用JavaScript为…

    css 2023年6月11日
    00

  • HTML+CSS 实现顶部导航栏菜单制作

    下面我来为你详细讲解“HTML+CSS 实现顶部导航栏菜单制作”的完整攻略。 一、准备工作 在实现顶部导航栏菜单前，我们需要先准备好相关的素材和环境。 1.1 需要的素材 制作顶部导航栏菜单需要用到一些素材，具体包括：logo、背景图片、导航栏菜单文字和链接等。 在准备素材时，需要注意图片的大小和格式，要保证图片大小适当、格式正确，避免影响页面加载速度和美观…

    css 2023年6月9日
    00

  • Vue中动画与过渡的使用教程

    Vue中动画与过渡的使用教程 Vue中动画与过渡的使用可以让网页效果更加流畅自然，提高用户体验。本教程将讲解Vue中动画与过渡的使用方法。 过渡 过渡是元素从一种样式变成另一种样式的效果，在Vue中，可以通过transition组件来实现过渡效果。 基本用法 在<transition>标签中添加要过渡的元素，使用name属性指定过渡效果的名字，然…

    css 2023年6月10日
    00

  • html中css三种常见的样式选择器

    HTML中的CSS样式选择器是用来选择和修改HTML内容中的样式的工具。其中有三种常见的样式选择器，分别是标签选择器、id选择器和类选择器。下面来详细讲解一下这三种常见的样式选择器。 标签选择器 标签选择器是最常用、最基础的一种选择器，可以利用HTML标签名称来选择元素。例如，如果我们想将所有段落文字的颜色修改为红色，可以如下编写CSS样式： p{ colo…

    css 2023年6月9日
    00

  • 使用css写带纹理渐变背景图的示例代码

    下面是关于“使用CSS写带纹理渐变背景图的示例代码”的完整攻略。 1. 准备工作 首先，我们需要准备一个需要添加背景图的HTML元素，比如一个<div>元素。我们为了方便，可以设置该元素的宽度和高度，以便观察渐变效果。假设我们设置<div>元素的宽度为400px，高度为200px，代码如下： <div style="w…

    css 2023年6月9日
    00

  • DIV+CSS 英文命名规范

    DIV+CSS 英文命名规范是一种在HTML+CSS网页设计中常用的规范，它通过对元素、类、ID等名称的规范化命名，使网页代码更加可读、可维护、可伸缩。下面是使用“DIV+CSS英文命名规范”的详细攻略： 1.命名原则 使用“DIV+CSS 英文命名规范”，需要遵循以下原则： 名称必须有意义 名称必须符合逻辑 名称必须唯一 名称必须小写 2.名称分类 按照元…

    css 2023年6月9日
    00

  • js+css实现三级导航菜单

    以下是详细的js+css实现三级导航菜单的攻略： 1. 先决条件 在开始之前，你需要具备以下技能： HTML 基础 CSS 基础 JavaScript 基础 2. HTML 结构 我们首先需要在 HTML 中构建出三级导航菜单的基本结构。结构如下： <nav> <ul> <li><a href="#&quo…

    css 2023年6月10日
    00

  • JS中 querySelector 与 getElementById 方法区别

    下面我来详细讲解一下JS中querySelector和getElementById方法的区别： 1. getElementById getElementById是DOM提供的方法之一，它返回的是与指定id属性值匹配的元素，如果没有匹配的元素，则返回null。它的语法如下： var elem = document.getElementById(id); 注意，…

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