PolyCMS
Back to Main Site

面向操作的模态链接集成指南

Last updated on Jun 24, 2026 02:13

＃＃ 介绍

在现代网页设计中，保持用户的参与度而不强迫他们离开当前页面是至关重要的。 PolyCMS 具有高度优化的动态模态链接块，允许作者直接在文章或登陆页面中嵌入交互式模态覆盖（弹出窗口）。

无论您是想显示快速注册表单、显示服务条款文档，还是在 iframe 中嵌入响应式外部站点，模态链接组件都提供了顺畅的解决方案。

交互功能和配置

模态链接块可通过块编辑器进行高度配置，提供对样式、大小和内容的精细控制：

1. 触发显示模式

您可以用两种视觉样式呈现模态触发器：

  • 链接模式（link）：呈现为带有点下划线的轻量级内联链接（.poly-modal-trigger-link），非常适合段落中的条款和条件或小旁注。

  • 按钮模式（button）：呈现为高度风格化的药丸形动作按钮（.poly-modal-trigger-button），具有平滑的悬停翻译微动画（translateY(-2px)）和独特的蓝色阴影。

2. 尺寸预设

覆盖层可响应地适应三种标准容器宽度：

  • 小 (sm)：最大宽度限制为 500px — 非常适合简单的通知警报、登录提示或紧凑的确认对话框。

  • 大 (lg)：最大宽度上限为 800px — 非常适合自定义 HTML 文章、表单或多媒体内容。

  • 全屏（full）：扩展到视口宽度的“95%”和高度“85vh”——针对复杂的仪表板或繁重的文档阅读器进行了优化。

3.灵活的内容类型

  • HTML 布局 (html)：直接在卡片内部渲染原始样式块 HTML 标记，并使用舒适的 24px 缓冲区填充。

  • IFrame Embeds (iframe)：以绝对安全的方式集成外部 Web 目标，将卡片填充重置为“0px”，以保证框架画布的无缝边缘到边缘渲染。

底层渲染架构

核心“ContentRenderer.php”中的渲染管道利用复杂的两阶段收集器模式来确保生成的页面 HTML 干净、有效且高性能：

graph TD
    A[Post Rendering Initiated] --> B[Parse Block content_raw]
    B --> C{Detect modalLink Block?}
    C -->|Yes| D[Phase 1: Render Inline Trigger Link/Button]
    C -->|Yes| E[Phase 2: Generate Modal Overlay & Script Markup]
    D --> F[Inject into Content Flow]
    E --> G[Collect inside $this->modalOverlays Array]
    F --> H[Combine and Apply Filter hooks]
    G --> I[Append Overlays at End of Document Flow]
    H --> J[Final Rendered HTML Output]
    I --> J

第 1 阶段：短语标签触发

该块生成具有唯一“ml-*” ID 的内联短语元素（“”或“