页面中的几种弹框样式
2019-11-04 本文已影响0人
求知笔记
这里我整理了几种常用的弹框样式
- Toast
用户产生操作，出现toast提示，一般2-3s消失；通过toast中的提示语告知用户需要了解的信息。让用户的行为在使用过程中得到反馈和帮助。
-
使用场景：
可提供成功、警告或错误等反馈信息； 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
- alert 警示提示
当用户进行某种操作时，网站会出现对应的警告信息提示用户，该提示信息的状态不会主动消失。
-
使用场景：
当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式，始终展现，不会自动消失，有的组件用户可以点击关闭。
- dialog对话框
用于提示用户当前操作，或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式，也可以是自定义复杂的模式，例如表单的填写。
-
使用场景：
用户在进行重要操作的时，需要进行二次确认。
用于重要的反馈提示，让用户知道信息提示。
承载少量的表单填写类，减少页面的跳转。
- Notification通知提醒框
悬浮出现在网页右上角，用于全局的提醒式通知。常见于服务器异常、操作失败等。
-
使用场景：
较为复杂的通知内容。
带有交互的通知，给出用户下一步的行动点。
系统主动推送。
Notification通知提醒框出现在网页右上角，一般4-5s消失，也可以点击叉号进行关闭。
- tooltip 文字提示
简单轻量的的文字提示。
-
使用场景：
鼠标移入则立即显示提示，移出则立即消失，不承载复杂文本和操作。
常用于解释操作按钮的文字说明。
image.png
