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

实现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技术站

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

相关文章