实现一个水平竖直居中的弹窗，并带有遮罩层的布局，可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>居中弹窗示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><div id="overlay" class="overlay"><div id="modal" class="modal"><div class="modal-content"><span class="close-btn" onclick="closeModal()">×</span><h2>弹窗标题</h2><p>这是一个水平竖直居中的弹窗。</p><button onclick="closeModal()">关闭</button></div></div></div><button id="openModalBtn">打开弹窗</button><script src="scripts.js"></script>
</body>
</html>
CSS部分 (styles.css)
body, html {height: 100%;margin: 0;font-family: Arial, sans-serif;
}.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩层 */display: none; /* 初始隐藏 */justify-content: center;align-items: center;
}.modal {background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);max-width: 500px;width: 100%;text-align: center;
}.modal-content {position: relative;
}.close-btn {position: absolute;top: 10px;right: 10px;font-size: 24px;cursor: pointer;
}#openModalBtn {margin-top: 20px;padding: 10px 20px;font-size: 16px;cursor: pointer;
}
JavaScript部分 (scripts.js)
function openModal() {document.getElementById('overlay').style.display = 'flex';
}function closeModal() {document.getElementById('overlay').style.display = 'none';
}// 为打开弹窗按钮添加点击事件
document.getElementById('openModalBtn').addEventListener('click', openModal);
说明
-
HTML部分：
#overlay是遮罩层，初始状态为隐藏 (display: none)。#modal是弹窗，包含内容。.close-btn是关闭按钮，点击时调用closeModal()函数。#openModalBtn是打开弹窗的按钮，点击时调用openModal()函数。
-
CSS部分：
.overlay使用position: fixed固定在屏幕上，并设置justify-content和align-items来使内容居中。.modal设置背景颜色、内边距、边框半径和阴影效果，并限制最大宽度。.close-btn设置关闭按钮的位置和样式。
-
JavaScript部分：
openModal()函数显示遮罩层和弹窗。closeModal()函数隐藏遮罩层和弹窗。- 为打开弹窗按钮添加点击事件，调用
openModal()函数。
这样，一个基本的水平竖直居中的弹窗带遮罩层的布局就完成了。你可以根据需要进一步美化和定制。
![[CSP2020-J4] 直播获奖](https://img-blog.csdnimg.cn/img_convert/5c8cf286e7bf2c08f859b337286669e9.png)
