引入Semantic UI的CSS、JS及jQuery；2. 使用.ui.modal结构定义标题、内容和操作区；3. 通过JavaScript调用modal('show')等方法控制显示与交互，快速实现功能完整的模态框。
要在CSS中使用Semantic UI快速搭建模态框（Modal），你不需要从零写样式，Semantic UI 已经提供了现成的类名和结构。只需引入框架并按照其HTML结构编写，就能实现美观且功能完整的模态弹窗。
引入 Semantic UI 文件
在使用模态框之前，确保页面已正确引入 Semantic UI 的CSS和JavaScript资源：
- 通过 CDN 引入 Semantic UI 的 CSS 和 JS 文件
- 同时需要引入 jQuery，因为 Semantic UI 的交互依赖于它
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
编写模态框的基本结构
Semantic UI 的 modal 组件由特定的 class 构成。以下是一个标准的模态框 HTML 结构：
<div class="ui modal">
<div class="header">欢迎使用模态框</div>
<div class="content">
<p>这里是模态框的内容，可以是文字、表单或图片。</p>
</div>
<div class="actions">
<div class="ui button">取消</div>
<div class="ui primary button">确认</div>
</div>
</div>说明：
立即学习“前端免费学习笔记（深入）”；
-
.header：定义标题区域 -
.content：放置主要内容 -
.actions：按钮操作区，建议使用 Semantic UI 的按钮类
通过 JavaScript 控制显示与隐藏
模态框默认不显示，需要用 JavaScript 触发。通常绑定到某个按钮点击事件。
<button id="showModal" class="ui button">打开模态框</button>
$('#showModal').click(function(){
$('.ui.modal').modal('show');
});常用方法：
-
modal('show')：显示模态框 -
modal('hide')：隐藏模态框 -
modal('toggle')：切换显示状态
自定义配置（可选）
你可以为模态框添加更多行为配置，例如关闭背景点击、设置动画等：
$('.ui.modal').modal({
closable: false, // 点击遮罩不关闭
onApprove: function() {
alert('你点击了确认！');
return true;
}
}).modal('show');基本上就这些。配合简洁的类名和强大的JS控制，Semantic UI 让模态框实现变得非常高效。
