Cutest UI 模态框组件
功能丰富的模态对话框组件，支持多种变体和动画效果。
基础模态框
居中模态框
小尺寸模态框
大尺寸模态框
底部弹出模态框
侧边弹出模态框
带表单的模态框
加载状态模态框
模态框使用指南
基本用法
Cutest UI 模态框组件使用简单直观，主要通过添加特定CSS类和调用JavaScript方法来控制显示和隐藏。
HTML结构
<div class="modal [可选变体类]" id="yourModalId">
<div class="modal-backdrop"></div>
<div class="modal-container">
<div class="modal-body">
<div class="modal-header">
<h3 class="modal-title">模态框标题</h3>
<button class="modal-close" data-dismiss="modal">×</button>
</div>
<div class="modal-content">
<!-- 模态框内容 -->
</div>
<div class="modal-footer">
<!-- 操作按钮 -->
</div>
</div>
</div>
</div>
模态框变体
基础模态框
使用默认样式，从上方向下滑入，适用于大多数场景
.modal
居中模态框
在页面中垂直和水平居中显示，适合需要用户重点关注的内容
.modal.-centered
小尺寸模态框
宽度较小，适用于简单提示信息或确认操作
.modal.-small
大尺寸模态框
宽度较大，适合展示详细信息、多列内容或复杂表单
.modal.-large
底部弹出模态框
从底部滑入，适合移动端操作菜单或选择器
.modal.-bottom
侧边弹出模态框
从左侧或右侧滑入，适合展示导航菜单或详情面板
.modal.-left / .modal.-right
JavaScript API
打开模态框
// 通过ID打开模态框
openModal('modalId');
// 或者通过DOM元素打开
const modalElement = document.getElementById('modalId');
openModal(modalElement);
关闭模态框
// 通过ID关闭模态框
closeModal('modalId');
// 或者通过DOM元素关闭
const modalElement = document.getElementById('modalId');
closeModal(modalElement);
自动绑定
添加特定的data属性可以自动绑定模态框的打开和关闭行为：
<!-- 打开模态框的按钮 --> <button data-target="modalId">打开模态框</button> <!-- 关闭模态框的按钮 --> <button data-dismiss="modal">关闭模态框</button>
最佳实践
- 为每个模态框分配唯一的ID，以便通过JavaScript进行控制
- 使用语义化的标题和内容，确保用户理解模态框的用途
- 为模态框提供明确的关闭操作（关闭按钮或取消按钮）
- 对于长内容的模态框，考虑在内容区域添加滚动条
- 在打开模态框时，考虑添加背景遮罩以聚焦用户注意力
- 侧边弹出和底部弹出的模态框通常不应该通过点击背景遮罩关闭