组件

模态框

经典模态框组件，在各种设备与视口下都有优雅间距，基于语义化 HTML 标签 <dialog> 构建。

模态框以 <dialog> 作为包裹容器，<article> 承载模态框内容。

<header> 内的 <button rel="prev"> 被定义为 float: right;，让关闭图标能够与标题顶部对齐。

查看源码

<dialog open>
<article>
  <header>
    <button aria-label="Close" rel="prev"></button>
    <p>
      <strong>🗓️ Thank You for Registering!</strong>
    </p>
  </header>
  <p>
    We're excited to have you join us for our
    upcoming event. Please arrive at the museum 
    on time to check in and get started.
  </p>
  <ul>
    <li>Date: Saturday, April 15</li>
    <li>Time: 10:00am - 12:00pm</li>
  </ul>
</article>
</dialog>

<footer> 内的内容默认右对齐。

查看源码

<dialog open>
<article>
  <h2>Confirm Your Membership</h2>
  <p>
    Thank you for signing up for a membership!
    Please review the membership details below:
  </p>
  <ul>
    <li>Membership: Individual</li>
    <li>Price: $10</li>
  </ul>
  <footer>
    <button class="secondary">
      Cancel
    </button>
    <button>Confirm</button>
  </footer>
</article>
</dialog>

演示

点击下方按钮切换模态框。

Pico 不包含 JavaScript 代码。你需要自行编写 JS 来与模态框交互。

作为一个起点，你可以参考 HTMLDialogElement，或查看下面的进阶示例：

要打开模态框，在 <dialog> 容器上添加 open 属性。

工具类

模态框附带 3 个工具类。

这些工具类在无类版本中不可用。

.modal-is-open 可阻止模态框下方的任何滚动和交互。

<!doctype html>
<html class="modal-is-open">
  ...
</html>

.modal-is-opening 提供打开动画。

<!doctype html>
<html class="modal-is-open modal-is-opening">
  ...
</html>

.modal-is-closing 提供关闭动画。

<!doctype html>
<html class="modal-is-open modal-is-closing">
  ...
</html>