DeveWork

CSS 命名之Dialog, Modal, Popup, Popover, Lightbox 等的区别

写 CSS 时候经常遇到要为弹窗浮层这些进行 class 命名的情况,之前对于Dialog, Modal, Popup, Flash,Tooltip等这类命名一直处于混用的情况。通过Quora 上的一个回答了解到了其中的区别,下面就按自己的理解说明下,更具体的区别可以直接看英文原文(文末链接)。如有疑问,欢迎留言探讨~

Alert

一般用于需要立即关注处理的警示信息(警示信息要言简意赅),一般伴有“确定”与“取消”的按钮。警示的窗体通常是前置在当前用户界面,使得用户不能忽视之而必须立即做出响应。

Modal/Dialog

一般用于通过点击或其它动作后产生的二次操作,操作的窗体就是Modal 或 Dialog。Modal 或 Dialog 主要用于那些不必时时刻刻显示在主界面上,在一定情况下才展示的信息(包括操作本身),通常伴有遮罩层且用户点击空白处(或者关闭按钮——如果有的话)即可消失。

Popup

一般用于展示一些不需要立即处理的信息。但Popup 一般不会自动消失,需要手动关闭,手动关闭的行为表示你已经看到并知晓信息了(跟“勾选表示我已经阅读”的意思差不多)。

Flash Notice/Growl Notification

一般用于那些限时提示的信息,这个“限时”并不意味着“紧急”,只是说信息是静静地展示在那里,你不看也没关系,一般几秒钟后便会自动消失。

Lightbox/Theatres

用于放大并聚焦页面中的某一部分信息,常常用于图片的放大展示中。这种情况下通常是伴有多张图片(相册集)且含有左右切换导航按钮,使得用户不必一张张点击图片缩略图来查看。

Popover/Tooltip/Hovercard

用于对于页面上某个元素展示额外的信息。常常用来添加额外的说明或提示,或者在用户进行某些动作予以预告形式的提醒(比如“点击这个链接会发生什么”的情景)。

参考:

https://www.quora.com/Whats-the-difference-between-a-modal-a-popover-and-a-popup

http://ux.stackexchange.com/questions/90336/whats-the-difference-between-a-modal-popup-popover-and-lightbox