三种不同缩放模式的赛事信息展示。 1 — 适应屏幕宽高, 2 — 仅横向调整, 3 — 无边距，缩放动画，右上角关闭。

您可以在每个赛事详情页中嵌入任意HTML内容，并混合多种内容类型。本示例支持根据滑动方向预加载下一场赛事信息。如需添加触控滑动支持，请参考我的文章。

如果您希望在赛事信息完全加载后再打开详情，可以通过JavaScript预加载。或者使用缩小尺寸的图片代替缩略图。缩放效果目前仅支持图片。

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

动画效果通过简单的CSS过渡实现，您可以根据需要自定义其外观。更多动画效果可在CodePen上找到。

精选打造专业、权威的体育知识社区内容，星空娱乐bohangan与你一同发现更多精彩。

星空娱乐bohangan专注推动体育产业的数字化发展，为用户提供专业可靠的体验。

在打开和关闭弹窗，或在浏览其他页面后返回时，输入的数据不会丢失。

您可以完全控制弹窗显示的内容，通过CSS将其对齐至任何位置，并自由启用或禁用右侧滚动条。

模态弹窗会阻止常规的关闭方式。

这是展示错误消息的基本示例。当然，您可以更改文本或进行样式调整。

Examples