页面中的几种弹框样式

这里我整理了几种常用的弹框样式

1. Toast
   用户产生操作，出现toast提示，一般2-3s消失；通过toast中的提示语告知用户需要了解的信息。让用户的行为在使用过程中得到反馈和帮助。

• 使用场景：
  可提供成功、警告或错误等反馈信息； 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

  
  

2. alert 警示提示
   当用户进行某种操作时，网站会出现对应的警告信息提示用户，该提示信息的状态不会主动消失。

• 使用场景：
  当某个页面需要向用户显示警告的信息时。
  非浮层的静态展现形式，始终展现，不会自动消失，有的组件用户可以点击关闭。

  
  

3. dialog对话框
   用于提示用户当前操作，或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式，也可以是自定义复杂的模式，例如表单的填写。

• 使用场景：
  用户在进行重要操作的时，需要进行二次确认。
  用于重要的反馈提示，让用户知道信息提示。
  承载少量的表单填写类，减少页面的跳转。

  
  

4. Notification通知提醒框
   悬浮出现在网页右上角，用于全局的提醒式通知。常见于服务器异常、操作失败等。

• 使用场景：
  较为复杂的通知内容。
  带有交互的通知，给出用户下一步的行动点。
  系统主动推送。
  Notification通知提醒框出现在网页右上角，一般4-5s消失，也可以点击叉号进行关闭。

  
  

5. tooltip 文字提示
   简单轻量的的文字提示。

• 使用场景：
  鼠标移入则立即显示提示，移出则立即消失，不承载复杂文本和操作。
  常用于解释操作按钮的文字说明。

  
  image.png