Модальные окна

Компонент для создания модальных окон, интегрированный в плагин. Может использоваться для разработки собственных расширений.

Использование

Основные методы

Для создания модального окна используйте статический метод create(), который:

1. Создает экземпляр new Modal()
2. Автоматически вызывает show() для отображения

Шорткод

echo do_shortcode('[modal id="test" title="title" display="1"]content[/modal]');

WARNING

Обязательное условие Необходимо подключить рендер оверлея в футере:

add_action('wp_footer', [\iiko\Modal::class, 'wp_footer'], 99);

Рекомендуемый способ (ООП)

\iiko\Modal::create([
    'id'          => 'test',
    'title'       => 'title',
    'description' => 'description',
    'content'     => 'content',
    'display'     => true
]);

Результат:

Окно со ссылкой

Для создания ссылки, открывающей модальное окно:

echo \iiko\Modal::create_link('Текст ссылки', [
    'link-class'  => 'btn btn-primary',
    'id'          => 'test',
    'title'       => 'Заголовок',
    'description' => 'Описание',
    'content'     => 'Контент окна'
]);

Результат:

Параметры

Параметр	Тип	Обязательный	Описание
id	string	Да	Уникальный ID
title	string	Нет	Заголовок окна
description	string	Нет	Подзаголовок
content	string	Да	Основной контент
display	boolean	Нет	Автопоказ (true/false)
link-class	string	Нет	CSS-класс для ссылки

---

WARNING

Для сложного контента используйте HTML-разметку внутри параметра content или передавайте готовую HTML-строку.

Стилизация

По умолчанию модальные окна имеют базовые стили. Для кастомизации используйте следующие CSS-классы:

.modal-wrapper {
}

/* Обертка */
.modal-overlay {
}

/* Фон */
.modal-content {
}

/* Контентная область */
.modal-header {
}

/* Шапка */
.modal-close {
}

/* Кнопка закрытия */

Ограничение

Не изменяйте структуру HTML-разметки модальных окон, это может нарушить их работу.

Заключение

Система модальных окон в woo2iiko предоставляет мощный и гибкий API для создания интерактивных элементов интерфейса. Она интегрируется с WordPress и WooCommerce, поддерживает кастомизацию и следует лучшим практикам веб-разработки.

Для получения дополнительной информации обратитесь к:

• Архитектуре плагина
• API документации
• Руководству по расширению

Дополнительные ресурсы

• Примеры использования модальных окон - практические примеры и кейсы использования
• Интеграция с WooCommerce - настройка модальных окон для e-commerce
• JavaScript API - расширенные возможности управления модальными окнами