Руководство по интеграции модальных ссылок, ориентированных на действия

Last updated on Jun 24, 2026 03:03

Введение

В современном веб-дизайне первостепенное значение имеет поддержание активности пользователей, не заставляя их покидать текущую страницу. PolyCMS имеет высокооптимизированный динамический блок Modal Link, который позволяет авторам встраивать интерактивные модальные наложения (всплывающие окна) непосредственно в статьи или целевые страницы.

Если вы хотите отобразить форму быстрой регистрации, отобразить документ с условиями обслуживания или встроить адаптивный внешний сайт в iframe, компонент Modal Link предоставит вам простое решение.

Интерактивные функции и конфигурация

Блок Modal Link легко настраивается с помощью редактора блоков, предлагая детальный контроль над стилем, размером и содержимым:

1. Триггерные режимы отображения

Вы можете представить модальный триггер в двух визуальных стилях:

Режим ссылки (link): отображается как легкая встроенная ссылка (.poly-modal-trigger-link) с пунктирным подчеркиванием, идеально подходящая для условий или небольших примечаний в абзаце.
Режим кнопки (button): отображается как стилизованная кнопка действия в форме таблетки (.poly-modal-trigger-button) с плавной микроанимацией перевода при наведении (translateY(-2px)) и отчетливыми синими тенями.

2. Предварительные настройки размера

Наложение оперативно адаптируется к трем стандартным ширинам контейнера:

Маленький («см»): максимальная ширина ограничена 500 пикселями — идеально подходит для простых уведомлений, приглашений на вход или компактных диалоговых окон подтверждения.
Большой (lg): максимальная ширина ограничена 800 пикселями — идеально подходит для пользовательских HTML-статей, форм или мультимедийного содержимого.
Полный экран («полный»): расширяется до «95%» ширины области просмотра и высоты «85vh» — оптимизировано для сложных информационных панелей или тяжелых программ чтения документов.

3. Гибкие типы контента

HTML-макеты (html): отображает необработанную блочную HTML-разметку непосредственно внутри карточки с удобным заполнением буфера 24px.
Встраивание IFrame (iframe): абсолютно безопасно интегрирует внешние веб-цели, сбрасывая отступы карточек на значение «0 пикселей», чтобы гарантировать плавный рендеринг холста фрейма от края до края.

Базовая архитектура рендеринга

Конвейер рендеринга в ядре 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: Триггер фразового тега

Блок генерирует встроенный элемент фразы (<a> или <button>) с уникальным идентификатором ml-*. Поскольку он отображается как элемент строчного уровня без вложенной разметки уровня блока, он поддерживает идеальную семантическую совместимость и может безопасно размещаться внутри стандартных текстовых абзацев.

Этап 2: наложение отсрочки

Вместо того, чтобы вводить тяжелую разметку наложения непосредственно в поток абзаца (что нарушает семантические рекомендации и правила вложенности), средство рендеринга помещает сегменты модальной карты и сценария в глобальный массив ($this->modalOverlays). В конце жизненного цикла рендеринга система агрегирует все собранные модальные контейнеры и добавляет их в самый низ документооборота, сразу после чего следуют сценарии их инициализации.

Прослушиватели событий и доступность

Модальные окна PolyCMS полностью оснащены собственными, адаптивными взаимодействиями «из коробки»:

Закрытие по внешнему щелчку: нажатие на наложение темного фона безопасно закрывает активную модальную карту.
Прослушиватель клавиши Escape: нажатие клавиши Escape немедленно закрывает любой открытый диалог, возвращая фокус макета.
Адаптивный темный режим: включает автономные правила стиля @media (prefers-color-scheme: dark) для автоматического преобразования модальных карточек в гладкие макеты с низким уровнем бликов, когда на клиентском устройстве включен темный режим.

Пример из реальной жизни: встроенная интерактивная панель мониторинга

Ниже приведен реальный пример, демонстрирующий как прямое встраивание полноразмерной информационной панели iframe, так и триггер модальной ссылки, ориентированный на действие.

Live Direct Embed (макет полноразмерной информационной панели)

Вы можете встраивать интерактивные отчеты непосредственно в свои статьи, используя адаптивный полноразмерный контейнер iframe:

Интерактивный полноэкранный модальный триггер

Вы также можете упаковать этот идентичный отчет в модальную ссылку, ориентированную на действие, что позволит читателям открывать его в красивом полноэкранном режиме одним щелчком мыши.

Вот активная модальная кнопка-триггер в действии:

Открыть модальное окно интерактивного отчета

Триггер привязки текста к абзацу

В дополнение к заметным кнопкам действий вы можете легко запускать модальные наложения прямо из стандартного текстового абзаца. Этот встроенный подход очень эффективен для ссылок на условия обслуживания, вспомогательные исследовательские данные или интерактивные виджеты, не нарушая при этом динамику чтения.

Вот живой абзац, демонстрирующий встроенный модальный триггер через текст привязки:

Мы постоянно следим за состоянием нашего бизнеса, чтобы оптимизировать эксплуатационные расходы. Например, вы можете просмотреть наш подробный ежемесячный отчет о финансовых результатах прямо в этом окне, не выходя из него, что позволяет заинтересованным сторонам принимать быстрые решения на основе данных на лету.

Как встроить через Markdown/HTML

Чтобы воспроизвести эту полноразмерную вставку iframe на свой сайт, добавьте следующую разметку в свою статью Markdown:

<iframe src="https://databuilder.polyxgo.com/embed/report/monthly-expense-vs-payment?chart=1&table=1&type=bar&chart_hidden=1" style="width: 100%; height: 500px; border: none; border-radius: 12px;" allowfullscreen></iframe>