弹窗分类
业界常见的弹窗类型及英文名称:
🎯 按行为模式分类
1. Modal(模态弹窗)
- 强制用户交互,背景变暗
- 示例:确认对话框、表单提交
// 代码示例
showModal({
title: "确认删除",
content: "确定要删除此项吗?"
})
2. Non-modal(非模态弹窗)
- 不阻断用户操作,可忽略
- 示例:通知提示、操作反馈
📍 按位置分类
1. Toast 🍞
- 短暂显示,自动消失
- 通常位于屏幕角落
/* 典型位置 */
.top-right, .bottom-left, .center
2. Popover
- 相对于触发元素定位
- 带小箭头指向源元素
3. Tooltip
- 鼠标悬停时显示
- 简短的提示信息
🎪 按功能用途分类
1. Dialog
- 通用对话框,包含内容和操作
AlertDialog,ConfirmDialog
2. Snackbar
- Material Design风格
- 底部出现,含简单操作按钮
3. Notification
- 系统级通知
- 常驻或定时消失
4. Lightbox
- 图片/媒体查看器
- 背景遮罩,焦点突出
5. Drawer/Sidebar
- 从边缘滑出
Left Drawer,Right Drawer
🔧 技术实现名称
// 常见的技术组件名
interface PopupTypes {
Modal: 'modal',
Dialog: 'dialog',
Toast: 'toast',
Tooltip: 'tooltip',
Popover: 'popover',
Notification: 'notification',
Snackbar: 'snackbar',
Drawer: 'drawer',
Lightbox: 'lightbox'
}