使用纯 CSS 创建模式窗口：无需 JavaScript

2025-06-11

使用纯 CSS 创建模式窗口：无需 JavaScript

等等，不用 JavaScript 也能创建模态窗口？没错，这就是 CSS 在背后偷偷嘲笑 JavaScript 的。在Lingo.dev，我们喜欢深入探索那些让其他开发者惊叹不已的奇特工程难题。

大多数开发者在需要模态框时，都会毫不犹豫地使用 JavaScript 库。但如果我告诉你，还有一种奇特、古怪的替代方案就隐藏在人们的视线中，你会怎么想？纯 CSS 可以实现一些出人意料的巧妙技巧，让你彻底质疑自己对前端开发的所有认知。

在本教程中，我们将探索如何仅使用 HTML 和 CSS 创建功能齐全的模态窗口。您可以将其用于娱乐或实际生产。我们将尝试让 CSS 实现一些它原本可能不具备的功能，而这正是这种方法如此独特之处。

那么，让我们开始吧！

理解模态窗口挑战

模态窗口是那些弹出在主内容之上的覆盖元素，通常需要用户进行某种交互才能返回到之前的操作。你随处可见模态窗口——登录表单、图片库、通知，以及那些烦人的“订阅我们的新闻通讯”弹窗（不过，我们来设计一些不那么烦人的弹窗吧？）。

传统上，模态框需要 JavaScript 来完成以下三件事：

  1. 触发时显示模态框
  2. 消除时隐藏模态框
  3. 管理焦点和键盘交互

所以我们的挑战是：如何在没有 JavaScript 的情况下处理这些状态变化？

答案来自两种巧妙的 CSS 技术，它们利用内置浏览器行为来创建交互性：:target伪类和被亲切地称为“复选框黑客”的技术。

CSS 构建块

在开始编码之前，让我们先了解一下实现无 JavaScript 模式的核心 CSS 概念。

:target 伪类

当元素的 ID 与 URL 的哈希值匹配时，就会触发伪:target类。简而言之，如果你的 URL 以 结尾#modal，那么任何以 结尾的元素id="modal"都会匹配该:target选择器。

这让我们能够根据导航状态更改样式，非常适合显示和隐藏模态框。当有人点击指向 的链接时#modal，浏览器会导航到该片段，我们可以使用 CSS 使模态框可见。

/* Hidden by default */
.modal {
  opacity: 0;
  pointer-events: none;
}

/* Visible when targeted */
.modal:target {
  opacity: 1;
  pointer-events: auto;
}
Enter fullscreen mode Exit fullscreen mode

复选框黑客攻击

复选框 hack 使用隐藏的复选框输入框和:checked伪类来切换状态。通过将标签连接到复选框，我们可以创建可点击的元素，无需 JavaScript 即可切换复选框的状态。

/* Hidden by default */
.modal {
  opacity: 0;
  pointer-events: none;
}

/* Visible when checkbox is checked */
.modal-checkbox:checked ~ .modal {
  opacity: 1;
  pointer-events: auto;
}
Enter fullscreen mode Exit fullscreen mode

基本 CSS 属性

这两种技术都依赖于几个关键的 CSS 属性：

  1. 位置：固定- 这会将模式从文档流中取出并相对于视口定位它，使其覆盖整个页面。

  2. 不透明度和指针事件- 这些控制可见性和交互。设置pointer-events: none可防止隐藏的模态窗口阻止对其下方元素的点击。

  3. z-index - 确保模式出现在其他内容之上。

  4. 过渡- 在显示和隐藏模式时添加流畅的动画。

现在我们了解了构建块，让我们实现我们的第一个模式。

使用 :target 构建基本 CSS 模式

这种:target方法是创建纯 CSS 模式的最简单方法。它只需要很少的 HTML 和 CSS，非常适合快速实现。

工作原理如下：

  1. 我们创建一个指向模态框 ID 的链接
  2. 点击后，浏览器会导航到该片段
  3. 选择器:target应用样式使模态框可见
  4. 另一个带有空片段的链接（href="#"）关闭模态框

让我们一步一步地构建它：

HTML结构

<!-- Modal trigger button -->
<a href="#modal-example" class="modal-trigger">Open Modal</a>

<!-- Modal container -->
<div id="modal-example" class="modal">
    <!-- Backdrop for closing the modal when clicking outside -->
    <a href="#" class="modal-backdrop"></a>

    <!-- Modal content -->
    <div class="modal-content">
        <h2>Welcome to the Modal!</h2>
        <p>This modal window is created using only HTML and CSS!</p>
        <a href="#" class="modal-close">Close Modal</a>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS 实现

/* Modal container - hidden by default */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;

    /* Center the modal content */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* When the modal is targeted via URL hash, make it visible */
.modal:target {
    opacity: 1;
    pointer-events: auto;
}

/* Modal content box */
.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 6px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

/* Backdrop close link - covers the entire screen */
.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: default;
    z-index: -1; /* Place behind modal content */
}
Enter fullscreen mode Exit fullscreen mode

完整的工作示例

要全面了解此方法的功能，请查看我们的第一个例子。此示例包括：

  • 简洁、极简的设计
  • 平滑的淡入/淡出过渡
  • 通过点击模态框外部即可关闭模态框
  • 适用于所有屏幕尺寸的响应行为

此实现创建了一个模式：

  • 单击“打开模式”链接时出现
  • 可以通过点击关闭按钮或模态框外的任何地方来关闭
  • 具有淡入淡出效果的流畅动画
  • 位于屏幕中央，背景为半透明

这种方法的优点在于它的简洁性。只需几行 HTML 和 CSS，我们就创建了一个功能齐全的模态框，而无需任何 JavaScript 代码。

然而，该:target方法确实存在一些局限性。最值得注意的是，它通过添加哈希值来更改 URL，这会影响浏览器历史记录。每次打开和关闭模态窗口时，浏览器历史记录中都会添加一条新条目，这意味着用户可能需要多次点击“后退”按钮才能离开该页面。

对于此行为存在问题的应用程序，复选框 hack 提供了一种替代方案。

复选框 Hack 替代方案

复选框 hack 通过使用隐藏的复选框输入来跟踪模态框的状态，从而避免 URL 更改。具体工作原理如下：

  1. 隐藏的复选框控制模态框的可见性
  2. 链接到复选框的标签用作打开按钮
  3. 链接到同一复选框的另一个标签用作关闭按钮
  4. CSS 选择器使用复选框的:checked状态来显示或隐藏模式

让我们实现这个方法：

HTML结构

<!-- Hidden checkbox for controlling modal state -->
<input type="checkbox" id="modal-toggle" class="modal-checkbox">

<!-- Modal trigger button (label for the checkbox) -->
<label for="modal-toggle" class="modal-trigger">Open Modal</label>

<!-- Modal container -->
<div class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <h2>Welcome to the Modal!</h2>
        <p>This modal window uses the checkbox hack!</p>

        <!-- Close button (another label for the same checkbox) -->
        <label for="modal-toggle" class="modal-close">Close Modal</label>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS 实现

/* Hide the checkbox input */
.modal-checkbox {
    display: none;
}

/* Modal container - hidden by default */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;

    /* Center the modal content */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* When the checkbox is checked, make the modal visible */
.modal-checkbox:checked ~ .modal {
    opacity: 1;
    pointer-events: auto;
}
Enter fullscreen mode Exit fullscreen mode

完整的工作示例

想要查看复选框 hack 的完整功能实现，请查看我们的第二个示例。此示例包含：

  • 简洁、现代的设计，配色方案不同
  • 模态内容的缩放动画
  • 打开/关闭模态框时 URL 不会发生变化
  • 适用于所有屏幕尺寸的响应行为

与该方法相比，复选框 hack 有几个优点:target：

  1. 无 URL 更改或浏览器历史记录条目
  2. 更好地控制模态框的行为
  3. 能够创建更复杂的交互

然而，它确实需要更多的 HTML 元素，并且需要仔细考虑可访问性。如果没有合适的 ARIA 属性，屏幕阅读器可能无法理解复选框和模态框之间的关系。

使用动画增强你的模态框

现在我们已经实现了基本功能，接下来让我们用 CSS 动画来提升视觉效果。动画可以让模态框的响应速度更快，并提供视觉提示，让你了解正在发生的事情。

以下是向我们的复选框模式添加简单进入动画的方法：

/* Modal content box with animation */
.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 6px;
    width: 90%;
    max-width: 500px;

    /* Initial state - scaled down */
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

/* Animate to full size when visible */
.modal-checkbox:checked ~ .modal .modal-content {
    transform: scale(1);
}
Enter fullscreen mode Exit fullscreen mode

这会在模态框出现时产生一种微妙的“弹出”效果。你可以使用不同的动画风格来发挥创意：

滑入动画

.modal-content {
    /* Initial state - off-screen */
    transform: translateY(-50px);
    transition: transform 0.3s ease;
}

.modal-checkbox:checked ~ .modal .modal-content {
    transform: translateY(0);
}
Enter fullscreen mode Exit fullscreen mode

淡入淡出动画

.modal-content {
    /* Initial state - transparent and small */
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

.modal-checkbox:checked ~ .modal .modal-content {
    opacity: 1;
    transform: scale(1);
}
Enter fullscreen mode Exit fullscreen mode

让你的模态框响应

为了打造一个真正精致的模态框，我们需要确保它能够在所有尺寸的设备上运行良好。以下是一些响应式设计的注意事项：

/* Base styles for the modal content */
.modal-content {
    width: 90%;
    max-width: 500px;
    padding: 2rem;
}

/* Adjustments for small screens */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }

    /* Smaller text on mobile */
    .modal-content h2 {
        font-size: 1.5rem;
    }
}
Enter fullscreen mode Exit fullscreen mode

这些调整确保模式在屏幕空间有限的移动设备上仍然可用。

无障碍注意事项

虽然纯 CSS 的模态框效果令人印象深刻，但与 JavaScript 实现相比，它们确实存在可访问性限制。以下是一些提升可访问性的方法：

  1. ARIA 属性- 将role="dialog"和添加aria-modal="true"到模态容器。

  2. 焦点管理——如果没有 JavaScript，这很有挑战性，但是:focus-within当模式包含焦点元素时，您可以使用伪类来设置其样式。

  3. 键盘导航- 确保所有交互元素均可制表，并且可以通过键盘操作关闭模式。

<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <div class="modal-content">
        <h2 id="modal-title">Accessible Modal Title</h2>
        <!-- Modal content -->
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

实际应用

仅使用 CSS 的模态框并不常见，但它们非常适合以下几种用例：

  1. 图片库- 单击缩略图即可在模式中显示较大版本。
  2. 简单表格——新闻通讯注册、联系表格或登录对话框。
  3. 通知和警报- 向用户显示重要消息。
  4. 内容预览- 在导航到完整页面之前显示内容预览。

对于更复杂的交互，例如需要与服务器通信的多步骤表单或模态框，您可能需要 JavaScript。但对于许多常见用例，纯 CSS 模态框提供了一种轻量级、高效的解决方案。

浏览器兼容性

我们介绍的技术适用于所有现代浏览器。:target伪类自 IE9 起已受支持，复选框 hack 适用于所有支持 CSS3 选择器的浏览器。

但是，有一些边缘情况需要注意：

  1. 移动浏览器可能会以不同的方式处理:target选择器，尤其是后退按钮的行为。
  2. 旧版浏览器可能不支持某些 CSS 功能，如 flexbox 或 transitions。

始终在不同的浏览器和设备上测试您的模态框，以确保一致的行为。

结论

使用纯 CSS 创建模态窗口展现了现代 CSS 的惊人威力。我们可以利用:target伪类或复选框 hack 来创建传统上需要 JavaScript 的交互式组件，这非常酷炫且独具特色。

如果您愿意使用一些 CSS，那么这种方法的好处就很明显了：

  • 加载时间更快（无需下载和解析 JavaScript）
  • 可靠性更高（即使 JavaScript 失败也能正常工作）
  • 维护更简单（活动部件更少）

虽然纯 CSS 的模态框确实存在局限性，尤其是在复杂的交互和可访问性方面，但它们仍然是任何开发者工具包中不可或缺的工具。对于许多常见用例，它们提供了一种优雅、轻量级的解决方案，挑战了我们对仅靠 CSS 实现功能的假设。

下次你需要一个简单的模态框时，不妨想想你真的需要 JavaScript 吗？或者 CSS 是否就足够了。你可能会惊讶地发现，一些巧妙的 CSS 技巧就能让你实现如此多的功能。;)

有用的链接：

还：

鏂囩珷鏉ユ簮锛�https://dev.to/maxprilutskiy/creating-modal-windows-with-pure-css-no-javascript-required-1ja
Devto 翻译
PREV
使用 Ansible 自动化您的编码环境，并仅使用 bash 脚本为其创建一个简单的 GUI 介绍 Ansible 安装 Ansible 定义主机 Playbook 和角色示例角色和 Playbook 从 CLI 运行 Ansible 为 Ansible 制作一个简单的 GUI 结论
NEXT
使用 Redis 在 Go 中限制 HTTP 请求的速率