Semantic-UI 模态基本类型介绍

模态（Modal）是web应用程序常见的UI元素，常常用于提示或强制用户进行操作。Semantic-UI 提供了多种用于创建模态的组件，使开发人员轻松创建可重用、可自定义的模态。

基本用法

基础模态（Basic Modal）

基本模态是最简单的模态，它只包含标题、正文和默认的操作按钮。

<div class="ui basic modal">
  <div class="header">
    Basic Modal
  </div>
  <div class="content">
    <p>Modal Content Goes Here</p>
  </div>
  <div class="actions">
    <div class="ui button">OK</div>
  </div>
</div>

效果如下：

带按钮的模态（Modal with Actions）

带按钮的模态通常用于需要用户进行操作的场景，例如确认框、信息框等。它由标题、正文以及一个或多个操作按钮组成。

<div class="ui modal">
  <div class="header">
    Modal with Actions
  </div>
  <div class="content">
    <p>Modal Content Goes Here</p>
  </div>
  <div class="actions">
    <div class="ui cancel button">Cancel</div>
    <div class="ui button">OK</div>
  </div>
</div>

效果如下：

大型模态（Large Modal）

如果模态中需要展示大量的内容，可以使用大型模态。它可以容纳更多的内容，并提供滚动条。

<div class="ui large modal">
  <div class="header">
    Large Modal
  </div>
  <div class="content">
    <p>Modal Content Goes Here</p>
  </div>
  <div class="actions">
    <div class="ui cancel button">Cancel</div>
    <div class="ui button">OK</div>
  </div>
</div>

效果如下：

小型模态（Small Modal）

相比于大型模态，小型模态更加紧凑，适合展示简短的内容。

<div class="ui small modal">
  <div class="header">
    Small Modal
  </div>
  <div class="content">
    <p>Modal Content Goes Here</p>
  </div>
  <div class="actions">
    <div class="ui cancel button">Cancel</div>
    <div class="ui button">OK</div>
  </div>
</div>

效果如下：

全屏模态（Fullscreen Modal）

全屏模态是一种特殊的模态，它会将内容展示在全屏幕上。

<div class="ui fullscreen modal">
  <div class="header">
    Fullscreen Modal
  </div>
  <div class="content">
    <p>Modal Content Goes Here</p>
  </div>
  <div class="actions">
    <div class="ui cancel button">Cancel</div>
    <div class="ui button">OK</div>
  </div>
</div>

效果如下：

自定义模态

除了以上基本模态类型，Semantic-UI 还提供了许多其他模态类型，且它们都可以通过自定义样式来实现。例如，可以在模态中添加图片、表单、下拉框等。下面展示一个自定义模态的示例：

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Custom Modal
  </div>
  <div class="content">
    <form class="ui form">
      <div class="field">
        <label>Name</label>
        <input type="text" name="name" placeholder="Name">
      </div>
      <div class="field">
        <label>Email</label>
        <input type="email" name="email" placeholder="Email">
      </div>
      <div class="field">
        <label>Gender</label>
        <select class="ui dropdown" name="gender">
          <option value="">Select Gender</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </div>
    </form>
  </div>
  <div class="actions">
    <div class="ui cancel button">Cancel</div>
    <div class="ui primary button">OK</div>
  </div>
</div>

效果如下：

总结

Semantic-UI 提供了多种用于创建模态的组件，通过简单的HTML代码即可实现强大的模态功能。在使用时，开发人员可以根据不同的场景选择合适的模态类型，并对模态进行自定义样式，以满足项目的特定需求。