📌  相关文章
📜  语义 ui 模态 - Html (1)

📅  最后修改于: 2023-12-03 14:57:42.196000             🧑  作者: Mango

语义 UI 模态 - HTML

什么是语义 UI 模态？

语义 UI 模态是一个基于 HTML、CSS 和 JavaScript 的前端框架，用于创建模态框（Modal）的组件和样式。这个框架提供了语义化的 HTML 和灵活的 CSS，使得创建和定制模态框变得非常简单。

如何使用语义 UI 模态？
步骤一：导入语义 UI 模态的 CSS 和 JavaScript 文件

在 HTML 文件的 <head> 部分中导入 CSS 文件和 JavaScript 文件：

<link rel="stylesheet" type="text/css" href="/path/to/semantic-ui-css/semantic.min.css">
<script src="/path/to/semantic-ui-css/semantic.min.js"></script>
步骤二：创建模态框的 HTML 结构

一个基本的模态框应该有如下 HTML 结构：

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    模态框标题
  </div>
  <div class="content">
    <p>模态框内容</p>
  </div>
  <div class="actions">
    <div class="ui button">取消</div>
    <div class="ui button primary">确定</div>
  </div>
</div>

其中，.ui.modal 表示这是一个模态框，.header 是标题，.content 是内容，.actions 是操作按钮。

步骤三：显示模态框

语义 UI 模态通过 JavaScript 来显示模态框。下面是一个显示模态框的示例：

$('.ui.modal').modal('show');
怎样自定义模态框的样式？

语义 UI 模态提供了丰富的 CSS 类来定制模态框的样式。下面是一些常用的 CSS 类：

  • .basic：基本样式，不带额外的装饰。
  • .fullscreen：全屏样式，将模态框铺满整个屏幕。
  • .scrolling：可滚动样式，允许模态框内容过多的情况下滚动。

你可以将这些 CSS 类添加到模态框的父元素上来改变模态框的样式，例如：

<div class="ui modal basic">
  <!-- 模态框内容 -->
</div>
怎样自定义模态框的行为？

语义 UI 模态通过 JavaScript 回调函数来自定义模态框的行为。下面是一些常用的回调函数：

  • onShow：模态框显示时触发的回调函数。
  • onVisible：模态框完全显示时触发的回调函数。
  • onHide：模态框隐藏时触发的回调函数。
  • onHidden：模态框完全隐藏时触发的回调函数。

你可以像下面这样使用回调函数：

$('.ui.modal').modal({
  onShow: function() {
    console.log('Modal is showing...');
  },
  onHide: function() {
    console.log('Modal is hiding...');
  }
});
总结

语义 UI 模态是一个非常实用的前端框架，通过 HTML、CSS 和 JavaScript 提供了丰富的功能和灵活的样式，让创建和定制模态框变得非常简单。希望这篇介绍能帮助你快速入门语义 UI 模态。