物化 CSS - 模态

物化 CSS 是一个基于 Material Design 的 CSS 框架，它提供了一些好看且易于使用的样式和组件。其中一个组件是模态框，可以用于展示重要信息或通过表单收集用户数据。本篇文章将介绍如何使用物化 CSS 来创建一个模态框。

准备工作

首先，我们需要在项目中引入物化 CSS。

<link rel="stylesheet" href="https://unpkg.com/materialize-css/dist/css/materialize.min.css">

此外，由于模态框通常需要一些 JavaScript 驱动的功能，因此我们还需要引入 Materialize 的 JavaScript 文件。

<script src="https://unpkg.com/materialize-css/dist/js/materialize.min.js"></script>

注意在上方的代码中，我们使用了 CDN 来引入物化 CSS。如果你更喜欢本地化部署，请前往物化 CSS 的官网下载代码。

创建模态框

现在，我们来创建一个空白的模态框。我们需要为模态框指定一个唯一的 ID，这样我们就可以通过 JavaScript 来操作它。

<!-- 模态框的 HTML 布局 -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

触发模态框

一旦我们有了一个模态框，我们需要在用户点击某个按钮时打开它。为此，我们可以使用物化 CSS 中的一个新的组件：浮动按钮（ Floating Action Button，缩写 FAB）。

<!-- 触发模态框的浮动按钮 -->
<div class="fixed-action-btn">
  <a class="btn-floating btn-large red modal-trigger" href="#modal1">
    <i class="large material-icons">add</i>
  </a>
</div>

注意触发模态框的按钮中包含了一个 modal-trigger 类和一个 href 属性，href 属性指向刚刚为模态框指定的 ID。当用户点击浮动按钮时，会触发模态框的展示。

定制模态框

我们可以进一步定制模态框，例如更改标题、内容和按钮的样式。

标题和内容

我们可以在模态框中添加标题和内容来呈现信息。

<div class="modal-content">
  <h4>Simple Modal</h4>
  <p>A bunch of text</p>
</div>

按钮

我们也可以更改默认的按钮，并添加自定义行为。

<div class="modal-footer">
  <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  <a href="#!" class="modal-close waves-effect waves-red btn-flat">Disagree</a>
</div>

如上代码所示，模态框的底部是一个按钮组，由两个红色和绿色按钮组成。每个按钮都有 .modal-close 类用于关闭模态框，而 .waves-effect 和 .waves-green 则定义了按钮的样式。

结论

本文介绍了如何使用物化 CSS 来创建一个漂亮而现代的模态框。我们学习了如何创建模态框、触发模态框、和调整模态框的样式。如果您对 Materialize 还不熟悉，请认真阅读文档以更好的使用该框架。