{% if site.url == 'local' %} {% else %} {% endif %}

示例

单图展示弹窗

提供三种尺寸选项:全屏自适应、仅水平自适应,以及无边距、带缩放动画且在右上角显示关闭按钮的模式。

图库轮播弹窗

在图库项目中,您可以嵌入任意 HTML 内容,并混合不同类型的内容。此示例在检测到滑动方向时自动预加载下一张图片。如需添加触控滑动支持,请参考相关文档。

动态缩放图库

若需在图片加载完成后再打开弹窗,可选择 JavaScript 预加载图片,或使用小尺寸的缩略图。当前的缩放效果仅支持图片。

影音内容弹窗

在小屏幕设备上,此弹窗将自动禁用,并触发链接的默认行为。

CSS 动画弹窗

通过简单的 CSS 过渡效果实现动画,您可以自由定制弹窗的外观。更多动画灵感可参考 CodePen。

淡入缩放动画
淡入滑动动画

对话框示例

这是示例文本。它不用于阅读。此处放置它仅为展示已完成、排版文本的外观和感觉。仅供参考。在此寻找意义的人将大失所望。

集成表单弹窗

关闭弹窗后重新打开,或在浏览其他页面后返回,已填写的表单数据将得到保留。

打开注册表单

表单

灯箱有一个选项可以自动聚焦到第一个输入框。强烈建议使用 inline 用于带表单的灯箱的弹出类型,而不是 ajax (以保留用户意外刷新页面时输入的数据)。


AJAX 加载弹窗

您可以完全控制弹窗内容布局,通过 CSS 实现任意对齐,并灵活控制右侧滚动条的显示状态。

响应式弹窗

此弹窗将禁用常规的退出方式。

打开模态窗口

模态对话框

您将无法通过常规方式(按 Esc 键或 点击按钮)关闭此对话框,但您可以根据 用户选择或操作以编程方式关闭它。

关闭

异常处理演示

此示例展示了基础的错误信息提示,您可以根据需要自定义文字和样式。

沪ICP备202447511933号
电话:+86 188 1847 6815邮箱:[email protected]微信:zhcnigames_648