三种不同适配模式的弹窗，满足各类屏幕显示需求。 1 — 完美适应宽度与高度， 2 — 仅宽度自适应， 3 — 无边距，支持缩放动画，关闭按钮置于右上角。

您可以将任何HTML内容置于图库的每个条目中，并混合不同的内容类型。本示例启用了基于滚动方向的图片预加载功能，以提升浏览体验。如需添加触控滑动支持，请参考我在Smashing Magazine上的文章。

如果您希望在图片完全加载后才打开弹窗，可以通过JavaScript预加载图片。或者使用缩略图的缩放版本。目前缩放效果仅支持图片。

在此示例中，弹窗在小屏幕尺寸下会自动禁用，并触发链接的默认行为。

动画效果通过简单的CSS过渡实现，您可以根据喜好自定义其外观。更多动画效果请参考CodePen。

對話框範例

這是示範文字。它不供閱讀。僅為展示已排版完成的文字外觀與感覺而放置。僅供參考。在此尋求意義者將大失所望。

在弹窗打开和关闭后，或在用户返回上一页时，已输入的数据将得到保留。

您可以完全掌控弹窗内容，通过CSS将其对齐到任意位置，并决定是否在窗口右侧显示滚动条。

此模态弹窗会禁用常规的关闭方式。

这是显示错误消息的基本示例。您可以自由修改文本或进行样式调整。

範例