业界常见的弹窗类型及英文名称:

🎯 按行为模式分类

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'
}