html弹窗的几种样式,弹窗样式你知道几种？

你能说出几种弹窗的类型吗？弹窗是App与用户进行交互的常见方式之一，不同的弹窗适用于不同的场景，弹窗效果直接影响用户的使用体验。所以明白弹窗的类别，合理使用弹窗是很有必要的。

弹窗类别

弹窗又称为对话框，分为模态弹窗和非模态弹窗两种，两者的区别在于需不需要用户对其进行回应。

模态弹窗会打断用户的正常操作，要求用户必须对其进行回应，否则不能继续其它操作。(告诉内容并让其操作)

非模态弹窗则不会影响用户的操作，用户可以不对其进行回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失。(只告诉内容)

弹窗样式

将常见的弹窗样式分为以下四种：

Dialog 对话框

Dialog通常出现在页面中间，需用用户进行有效操作，否则不能进行其他操作。

使用场景：Dialog是用于信息提示以及对操作的二次确认，标题和内容的设计尽量简洁，一到两项选择最佳。一般只有一个选择的是阅读确认按钮，目的是让用户阅读之后消除弹窗，而选择过多容易引起用户的选择焦虑感。常用于提示、引导、二次确认。

注意：Dialog会打断用户的操作，所以在设计的时候一定要考虑使用场景，考虑用户的使用情绪。

Actionbar 功能框

Actionbar功能框跟Dialog对话框一样都属于模态弹窗，Actionbar被设计用来向用户展示多个功能选择按钮。

使用场景：功能框、向用户展示多个功能选项，展示形式有纯文字、图标加文字等。

Toast 提示框

Toast提示框是一种非模态弹窗，提醒消息反馈消息，一般用来显示操作结果，或者应用状态的改变。Toast提示框为一句简短的描述性文字。Toast提示框是比较温和的，不会打断用户的使用场景，而且在一定时间后就会自动消失。

使用场景：消息提示，内容更新，操作完成状态。

注意：Toast提示框显示的时间较短、占用区域不大，易被用户忽略，所以Toast不适合承载过多的文字和重要信息。

Snackbar 提示对话框

Snackbar 提示对话框跟 Toast提示框功能有些相似，它也是一种非模态弹窗，同时拥有Toast和Dialog的特点，不会打断用户正常的操作流程，它除了可以告诉用户信息内容，还可以与用户进行对话交互，用户可以点击功能按钮进行回应。比如我知道了。

弹窗的样式还有很多的，比如Tips，Dropdown等，大家可以去多比较一下，有些弹窗功能都是大同小异的，从细节出发，去提升产品的体验，多为用户考虑。