等等，你不用JavaScript就能做模态窗口？没错，CSS 正在偷偷地在背后玩弄 JavaScript。在Lingo.dev，我们就是喜欢探索那些让其他开发者目瞪口呆的奇怪技术坑。

大多数开发者在需要模态窗口时，根本不会犹豫就直接使用JavaScript库。但是，如果你听说有一种怪异的替代方案就在眼前，你会怎么想？纯CSS却能施展一些意想不到的小把戏，这会让你重新思考你对前端开发的所有认知。

在这次教程里，我们将学习如何仅用 HTML 和 CSS 打造功能齐全的模态窗口。你可以用它来玩，或者在项目中。我们将推动 CSS 完成功能，这可能不是它原本的设计目的，这也正是这种方法特别有趣的原因。

那么就开始吧！

模态窗口是覆盖在主要页面上的弹出窗口，通常需要你先完成某种互动才能继续之前的活动。你肯定在很多地方见过它们——登录表单、图片画廊、通知，还有那些烦人的“订阅我们的新闻通讯”弹窗（不过我们还是尽量少做这种烦人的吧）。

通常，模态窗口需要 JavaScript 实现三个主要方面：

1. 在触发时显示模态框
2. 在关闭时隐藏模态框
3. 管理焦点和键盘交互操作

所以我们不用JavaScript如何处理这些状态变化？

答案来自两个巧妙的 CSS 技巧，它们利用浏览器自带的行为来创建交互效果：:target伪类和俗称的“复选框技巧”。

在我们开始写代码之前，让我们先搞清楚如何用CSS实现无需JavaScript的模态窗口。

目标伪类: (:target)

:target伪类会在元素ID与URL中的哈希片段匹配时被触发。换句话说，如果你的URL最后是#modal，那么任何id="modal"的元素都会匹配:target选择器。

这给我们提供了一种根据导航状态来改变样式的办法，这非常适合用来显示和隐藏模态窗口。当你点击指向#modal的链接时，浏览器会导航到该部分，我们可以通过CSS让模态窗口显示出来。

    /* 默认隐藏 */
    .modal {
      opacity: 0;
      pointer-events: none;
    }

    /* 可见时 */
    .modal:target {
      opacity: 1;
      pointer-events: auto;
    }

点击全屏，退出全屏

复选框技巧（Hack）

这种复选框技巧使用了一个隐藏的复选框输入和:checked伪类来切换选中状态。通过将标签关联到复选框，我们可以创建关联的标签，使其点击时切换复选框的选中状态，而不需要JavaScript。

    /* 默认隐藏 */
    .modal {
      不透明度: 0;
      鼠标事件: none;
    }

    /* 当复选框被选中时显示 */
    .modal-checkbox:checked ~ .modal {
      不透明度: 1;
      鼠标事件: auto;
    }

点全屏 取消全屏

常用的CSS属性

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

1. 位置：固定- 这会将模态从文档流中移除，并将其相对于视口定位，从而可以覆盖整个页面的内容。

2. 不透明度和pointer-events - 它们控制可见性和交互性。设置 pointer-events: none 这样可以防止隐藏的模态框阻止点击其下方的元素。

3. z-index - 让弹窗出现在其他内容之上。

4. 过渡效果 - 添加平滑的动画效果，当显示或隐藏模态对话框时。

现在我们已经了解了构建模块，让我们来实现第一个模态。

使用 :target 选择器的方法是创建一个仅用 CSS 的模态窗口最简单的方式。它只需最少的 HTML 和 CSS，非常适合快速实现的情况。

它是这样运作的：

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

咱们一步一步来把它建起来吧

HTML 的结构

    <!-- 模态框触发按钮 -->
    <a href="#modal-example" class="modal-trigger">打开模态框</a>

    <!-- 模态框容器 -->
    <div id="modal-example" class="modal">
        <!-- 点击外部区域可以关闭模态框 -->
        <a href="#" class="modal-backdrop"></a>

        <!-- 模态框内容 -->
        <div class="modal-content">
            <h2>欢迎进入模态框！</h2>
            <p>这个模态框仅使用 HTML 和 CSS 制作！</p>
            <a href="#" class="modal-close">关闭模态框</a>
        </div>
    </div>

点击全屏观看 点击退出全屏

CSS 实现：

    /* 模态对话框容器 - 默认不显示 */
    .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;

        /* 居中对齐模态对话框中的内容 */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
    }

    /* 当模态对话框成为 URL 哈希目标时，显示它 */
    .modal:target {
        opacity: 1;
        pointer-events: auto;
    }

    /* 模态对话框内容 */
    .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);
    }

    /* 背景关闭链接 - 覆盖整个屏幕，点击可关闭 */
    .modal-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: default;
        z-index: -1; /* 放在模态对话框内容之后 */
    }

进入全屏，退出全屏

完整的工作实例

为了实现这种方法的完全功能实现，请参阅我们的第一个例子，并注意以下内容。该例子包括：

• 干净简洁的设计
• 平滑的渐入渐出效果
• 点击外部关闭模态窗口的功能
• 适应所有屏幕尺寸

这个实现创建了一个模态框。

• 当你点击“打开弹出窗口”链接时，它会出现
• 可以通过点击关闭按钮或点击弹出窗口外部的任何位置来关闭
• 平滑地淡入和淡出
• 居中显示在屏幕上，带有半透明的背景

这种方法的魅力在于其简单。我们仅用少量的 HTML（超文本标记语言）和 CSS（层叠样式表）代码就创建了一个不需要 JavaScript 的功能性模态窗口。

然而，:target 这个方法确实有一些限制。最明显的是，它通过添加一个哈希片段 (#hash) 来更改 URL，这会影响浏览器历史记录。每次你打开和关闭模态对话框时，都会在浏览器的历史记录中添加一个新条目，这意味着用户可能需要多次点击后退按钮才能离开页面。

对于这种行为在某些应用中引起问题时，复选框解决方案提供了一个替代方法。

复选框技巧避免了URL的变化，通过一个隐藏的复选框来跟踪模态的状态变化。它是这样工作的：

1. 一个隐藏的复选框控制模态对话框的可见性
2. 链接到复选框的标签充当打开按钮
3. 另一个同样连接到此复选框的标签充当关闭按钮
4. CSS 选择器通过复选框的:checked状态来显示或隐藏模态对话框

让我们来试试这种方法：

HTML

    <!-- 隐藏的复选框，用于控制模态窗口的显示 -->
    <input type="checkbox" id="modal-toggle" class="modal-checkbox">

    <!-- 模态窗口触发按钮（复选框的标签） -->
    <label for="modal-toggle" class="modal-trigger">打开模态</label>

    <!-- 模态窗口容器 -->
    <div class="modal">
        <!-- 模态窗口内容 -->
        <div class="modal-content">
            <h2>欢迎来到模态窗口！</h2>
            <p>此模态窗口使用了复选框的技巧！</p>

            <!-- 关闭按钮（同复选框的另一个标签） -->
            <label for="modal-toggle" class="modal-close">关闭模态</label>
        </div>
    </div>

点击全屏 点击退出全屏

CSS 实现方式

    /* 隐藏复选框输入 */
    .modal-checkbox {
        display: none;
    }

    /* 模态框容器 - 默认为隐藏 */
    .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;

        /* 居中对齐模态框内容 */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
    }

    /* 当复选框被选中时，模态框变为可见 */
    .modal-checkbox:checked ~ .modal {
        opacity: 1;
        pointer-events: auto;
    }

按一下全屏按钮，进入或退出全屏

完整示例

为了实现完整的复选框技巧实现，可以查看我们的第二个示例页面。该示例中包含：

• 简洁现代的设计，使用不同的颜色搭配
• 模态内容的缩放动画效果
• 打开或关闭模态时，URL 不会更新
• 适用于所有屏幕尺寸的自适应表现

复选框技巧（或方法）相比使用 :target 选择器主要有以下几点好处：

1. 不改变 URL 或记录浏览器历史
2. 更多控制模态行为的灵活性
3. 创建更复杂的交互

然而，它确实需要更多的HTML元素来支持可访问性。如果没有适当的ARIA属性，屏幕阅读器可能无法正确识别复选框和模态框之间的关系。复选框（checkbox）与模态框之间的关系可能不被屏幕阅读器理解。

现在我们已经让基本功能运转起来，让我们用CSS动画给它增加一些视觉上的美化。这样可以让模态窗口看起来更响应，并提供一些关于正在发生的事情的视觉提示。

这里是如何为我们的复选框添加一个简单的进入动画：

    /* 带有动画效果的弹出框内容框 */
    .modal-content {
        background-color: white;
        padding: 2rem;
        border-radius: 6px;
        width: 90%;
        max-width: 500px;

        /* 初始缩小状态 */
        transform: scale(0.8);
        transition: 变换过渡 0.3s ease;
    }

    /* 当可见时放大 */
    .modal-checkbox:checked ~ .modal .modal-content {
        transform: scale(1);
    }

全屏模式 / 退出

这会产生一种微妙的“弹出”效果，当模态框出现的时候。你可以发挥不同的动画效果来增加创意：

滑入效果

    .modal-content {
        /* 初始状态：隐藏 */
        transform: translateY(-50px);
        transition: transform 0.3s ease; /* 过渡效果：变换 0.3 秒，缓和 */
    }

    .modal-checkbox:checked ~ .modal .modal-content {
        /* 当复选框选中时 */
        transform: translateY(0); /* 转换为初始位置 */
    }

点击这里进入全屏模式，点击这里退出全屏模式.

淡入淡出与缩放效果

    .modal-content {
        /* 初始状态：透明且较小，*/
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.3s ease;
    }

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

切换到全屏模式，点击退出全屏模式

如何让你的模态框变得响应式

为了使模态框真正精致，我们需要确保它在各种设备尺寸上都能正常运作。这里有一些关于响应式设计的考虑。

/* 模态窗口内容的基础样式 */
.modal-content {
    width: 90%;
    max-width: 500px;
    padding: 2rem;
}

/* 针对小屏幕的调整 */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }

    /* 移动设备上的较小字体 */
    .modal-content h2 {
        font-size: 1.5rem;
    }
}

全屏模式；退出全屏

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

虽然仅使用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">可访问的模态对话框标题</h2>
            <!-- Modal content -->
        </div>
    </div>

进入全屏，退出全屏

仅使用CSS的模态框有点不寻常，不过，它们非常适合几个应用场景：

1. 图片库 - 点击缩略图显示更大版本的图片在模态框中。
2. 简单表单 - 例如订阅通讯报、填写联系表或登录对话框。
3. 通知和提醒 - 向用户展示重要消息。
4. 内容预览 - 在进入完整页面前预览内容。

对于更复杂的交互，例如多步骤表单或需要服务器交互的模态框，你可能需要使用 JavaScript。但对于许多常见用例而言，仅用 CSS 的模态框提供了一种轻便且高效的解决方案。

我们介绍的技术适用于所有现代浏览器。:target伪类自IE9起就得到了支持，而复选框技巧方法在所有支持CSS3选择器的浏览器中都能使用。

但是，有些特殊情况需要留心。

1. 移动浏览器 可能会以不同的方式处理 :target 选择器，特别是在使用返回按钮时的行为可能会有所不同。
2. 旧版浏览器 可能不支持某些 CSS 功能，例如 flexbox 或过渡效果。

在不同的浏览器和设备上测试你的弹窗，以确保它们在所有浏览器和设备上的表现一致。

这非常酷且不同寻常，我们可以用纯CSS创建模态窗口，展示现代CSS令人惊讶的能力。我们可以利用:target伪类或复选框Hack来创建以往通常需要JavaScript的交互组件。

如果你愿意用一点CSS，这样做的话好处就很明显。

• 更快的加载速度（无需下载和解析 JavaScript）
• 更高的稳定性（即使 JavaScript 出错也能正常工作）
• 更简单的维护工作（更少的组件和代码）

虽然仅使用 CSS 的模态框确实存在一些限制，特别是在处理复杂的交互和无障碍性方面，但它们仍然是每个开发者的工具箱中非常有价值的工具。对于许多常见用例，它们提供了一个优雅且轻量的解决方案，挑战了我们对仅使用 CSS 所能做到的事情的原有认知。

下次当你需要一个简单的模态框时，考虑一下是否真的需要JavaScript，或者CSS就够了。你会发现用一些巧妙的CSS技巧可以搞定很多事情呢。 ;)

这里留白了

相关链接。

• 基本模态框示例 (:target)
• 带有复选框窍门的模态框示例

另外：

• 我们的开发梗在 X 上: