灯箱对话框

借助灯箱微件,用户可以在模式对话框中查看多媒体内容。

一般用法

以下是用于打开灯箱对话框的示例按钮:

状态图

这是一个锚标记,其 href 属性设置为 #lightbox-trigger,也可用于打开灯箱:

显示图片

状态图

YouTube 视频

这是一个用于打开 YouTube 视频对话框的示例按钮:

这是一个 YouTube 链接,用于打开 YouTube 视频对话框:

观看视频

映像

图片还可以在灯箱模态对话框中显示。无需添加全宽图片,此功能特别适合显示屏幕截图的详细信息。

向右上浮动

购物车示例

这个示例的图片浮动在它前面的内容右侧。此微件会打开灯箱模态对话框,并显示购物车示例提示。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor cidcididunt ut labore et dolore Maga aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. pre 养精灵的杜伊尔·杜鲁门,处于波 涌的 vese vese cillum dolore eu fugiat nulla pariatur 中。Excceeur sint occaecat cupidatat non 无道具,人们在 Culfa qui officia deserunt mollit anim id est laborum 中一探究竟。

悬浮在左

这是一个图片,它漂浮在它前面的内容左侧。此微件可打开灯箱模态对话框,但不会显示提示。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor cidcididunt ut labore et dolore Maga aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. pre 养精灵的杜伊尔·杜鲁门,处于波 涌的 vese vese cillum dolore eu fugiat nulla pariatur 中。Excceeur sint occaecat cupidatat non 无道具,人们在 Culfa qui officia deserunt mollit anim id est laborum 中一探究竟。

在网页加载时显示

您可以添加查询字符串参数 dialogOnLoad 以及 ID 后缀,从而在网页加载时打开灯箱广告

状态图