在前端开发中，实现一个基本的 popup（弹出窗口）可以通过多种方式来完成，包括使用原生 JavaScript、HTML 和 CSS。以下是一个简单的示例，展示了如何使用这些技术来创建一个基本的 popup。
HTML 结构
首先，在 HTML 文件中定义 popup 的结构。这通常包括一个背景遮罩（overlay）和一个包含内容的容器（container）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="openPopup">Open Popup</button>
<div id="popup" class="popup hidden">
<div class="popup-content">
<h2>Popup Title</h2>
<p>This is the popup content.</p>
<button id="closePopup">Close</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 样式
接下来，在 CSS 文件中定义 popup 和相关元素的样式。这里我们使用了一些基本的样式来使 popup 看起来更美观。
/* styles.css */
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 背景遮罩 */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* 确保 popup 在其他内容之上 */
}
.popup.hidden {
display: none; /* 隐藏 popup */
}
.popup-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
JavaScript 逻辑
最后，在 JavaScript 文件中添加逻辑来处理 popup 的显示和隐藏。我们将使用 addEventListener 方法来监听按钮的点击事件，并通过修改 CSS 类来切换 popup 的可见性。
// script.js
document.addEventListener('DOMContentLoaded', function() {
var openButton = document.getElementById('openPopup');
var closeButton = document.getElementById('closePopup');
var popup = document.getElementById('popup');
// 打开 popup 的函数
function showPopup() {
popup.classList.remove('hidden');
}
// 关闭 popup 的函数
function hidePopup() {
popup.classList.add('hidden');
}
// 监听打开按钮的点击事件
openButton.addEventListener('click', showPopup);
// 监听关闭按钮的点击事件和背景遮罩的点击事件（可选）
closeButton.addEventListener('click', hidePopup);
popup.addEventListener('click', function(event) {
if (event.target === popup) {
hidePopup(); // 如果点击的是背景遮罩，则关闭 popup（可选）
}
});
});
这个示例展示了如何使用原生 JavaScript、HTML 和 CSS 来创建一个简单的 popup。你可以根据自己的需求进一步定制和扩展这个示例。
标签：function,遮罩,popup,实现,javascript,HTML,addEventListener,CSS From： https://www.cnblogs.com/ai888/p/18657031