css弹窗代码

CSS 弹窗是一种使用 CSS 技术实现的轻量级弹出窗口，通常用于显示额外的信息、警告、确认对话框等。CSS 弹窗的优势在于它们不需要 JavaScript 即可实现基本的动画效果，且对性能的影响较小。

基础概念

CSS 弹窗主要通过以下技术实现：

定位（Positioning）：使用 position: absolute 或 position: fixed 来控制弹窗的位置。
过渡（Transitions） 和 动画（Animations）：使用 CSS 过渡和动画来实现弹窗的显示和隐藏效果。
层叠上下文（Stacking Context）：通过 z-index 属性控制弹窗在其他元素之上的显示。

类型

CSS 弹窗主要有以下几种类型：

模态弹窗（Modal Popup）：阻止用户与页面其他部分交互，直到用户关闭弹窗。
非模态弹窗（Non-Modal Popup）：允许用户在弹窗显示时与页面其他部分交互。
提示弹窗（Tooltip Popup）：通常用于显示简短的提示信息。

应用场景

CSS 弹窗广泛应用于：

表单验证：在用户提交表单前显示错误信息。
警告和确认对话框：在执行某些操作前提示用户确认。
图片预览：点击图片后显示大图。

示例代码

以下是一个简单的 CSS 弹窗示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Popup Example</title>
    <style>
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        .overlay.active {
            display: block;
        }
        .popup.active {
            display: block;
        }
    </style>
</head>
<body>
    <button id="openPopup">Open Popup</button>
    <div class="overlay" id="overlay"></div>
    <div class="popup" id="popup">
        <h2>Popup Title</h2>
        <p>This is a simple CSS popup.</p>
        <button id="closePopup">Close</button>
    </div>

    <script>
        document.getElementById('openPopup').addEventListener('click', function() {
            document.getElementById('popup').classList.add('active');
            document.getElementById('overlay').classList.add('active');
        });

        document.getElementById('closePopup').addEventListener('click', function() {
            document.getElementById('popup').classList.remove('active');
            document.getElementById('overlay').classList.remove('active');
        });
    </script>
</body>
</html>