首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 命名之Dialog, Modal, Popup, Popover, Lightbox 等的区别

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

作者头像
Jeff
发布2018-01-22 11:03:58
4.5K0
发布2018-01-22 11:03:58
举报
文章被收录于专栏:DeveWorkDeveWork

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

Alert

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

Alert
Alert

Modal/Dialog

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

dialog
dialog

Popup

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

popup
popup

Flash Notice/Growl Notification

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

flash
flash

Lightbox/Theatres

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

lightbox
lightbox

Popover/Tooltip/Hovercard

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

pupover
pupover
Popover
Popover

参考:

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016/09/20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Alert
  • Modal/Dialog
  • Popup
  • Flash Notice/Growl Notification
  • Lightbox/Theatres
  • Popover/Tooltip/Hovercard
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档