Softonic

CSS 模态框生成器

步 1 / 2
结果

模态对话框是一个全屏覆盖层上叠放面板的结构：背景使页面变暗并阻止交互，面板承载标题、内容和操作按钮。这个生成器用五个 class 写出这一结构的 CSS：.modal-backdrop、.modal-panel、.modal-header、.modal-body 和 .modal-actions。你可以设置面板宽度、圆角半径和强调色，然后把结果复制到项目中。

如何生成模态框样式

  1. 1

    设置面板宽度

    输入目标宽度（像素）。面板使用 `min(100%, Npx)`，因此在小屏幕上会自动收缩。

  2. 2

    选择圆角半径

    选择面板边角的圆润程度，从锐利的方角到完全圆角卡片。

  3. 3

    选择强调色

    选择标题栏顶部 4 px 强调条的颜色。

  4. 4

    复制 CSS

    复制代码，并在你的标记中使用相同的 class 名称：backdrop、panel、header、body、actions。

生成的 CSS 涵盖哪些内容

代码为五个 class 设置样式：

  • .modal-backdrop：固定的全屏图层，深色半透明背景（rgba(17, 24, 39, .62)），居中网格，面板周围 24 px 边距。
  • .modal-panel：宽度为 min(100%, Npx) 的白色卡片，带圆角半径、柔和阴影和裁切边角。
  • .modal-header：所选颜色的 4 px 强调条，下方是 20 px 24 px 内边距的标题区域。
  • .modal-body：内容区域，内边距为 18 px 24 px。
  • .modal-actions：右对齐的操作按钮行，间距 10 px。

对应的 HTML 结构

CSS 需要如下标记：

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>确认</h2>
    </div>
    <div class="modal-body">
      <p>确定要继续吗？</p>
    </div>
    <div class="modal-actions">
      <button>取消</button>
      <button>继续</button>
    </div>
  </div>
</div>

请把面板放在背景内部：背景是固定图层，面板在其中居中。要打开和关闭模态框，可以从应用代码中添加和移除背景，或切换其显示状态。

适配小屏幕

面板宽度通过 min(100%, Npx) 限制，因此在较窄的手机上，520 px 的设置会变成整个视口宽度减去背景 24 px 边距。操作行保持右对齐，长内容随页面滚动。常见场景无需媒体查询。

说明与限制

该生成器只输出 CSS。它不包含打开或关闭模态框、锁定键盘焦点或处理 ESC 键的 JavaScript。请在你的应用中添加这些逻辑。

标题栏始终保留 4 px 强调条；如果不需要，可以在复制后的代码中删除或更改该规则的颜色。

常见问题

固定的深色背景、按你设定的宽度和圆角半径居中的白色面板、带强调条的标题栏、内容区域和右对齐的操作行。五个 class 可直接粘贴到样式表中。

只有 CSS。代码定义了五个 class，你在自己的标记中使用它们，并用自己的脚本处理打开和关闭。

面板宽度通过 min(100%, Npx) 限制，因此在较窄的手机上，面板会占满可用宽度减去背景 24 px 边距。操作行保持右对齐。

生成器不提供 JavaScript。请在你的应用中控制背景的显示和隐藏，例如用一个小脚本在点击按钮时显示它，之后再隐藏。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本