Учебник Micromodal

Введение
- Что такое Micromodal
- История создания и философия библиотеки
- Преимущества перед другими решениями
- Требования и совместимость
- Установка и подключение
Базовые концепции
- Принцип работы модальных окон
- Архитектура библиотеки
- ARIA-атрибуты и доступность
- Управление фокусом
- Обработка клавиатуры
Быстрый старт
- Разметка HTML
- Минимальная инициализация
- Первое модальное окно
- Открытие и закрытие
- Проверка работоспособности
Структура HTML
- Обязательные элементы
- Data-атрибуты
- Роли и семантика
- Контейнер overlay
- Содержимое modal
- Кнопки закрытия
- Шаблоны разметки
Инициализация
- Метод init
- Параметры конфигурации
- Одиночная инициализация
- Массовая инициализация
- Повторная инициализация
- Уничтожение экземпляров
API методы
- show
- close
- destroy
- Передача параметров в методы
- Программное управление
- Цепочки вызовов
Конфигурация
- onShow
- onClose
- openTrigger
- closeTrigger
- openClass
- disableScroll
- disableFocus
- awaitOpenAnimation
- awaitCloseAnimation
- debugMode
- Переопределение настроек
Обработчики событий
- Callback-функции
- Параметры обработчиков
- Контекст выполнения
- Порядок срабатывания
- Отмена действий
- Асинхронные обработчики
Стилизация
- Базовые стили
- Переопределение классов
- Анимации открытия
- Анимации закрытия
- Backdrop и overlay
- Адаптивность
- Кроссбраузерность
Доступность
- WCAG рекомендации
- Навигация с клавиатуры
- Focus trap
- Управление tabindex
- Aria-атрибуты в динамике
- Тестирование доступности
Управление скроллом
- Блокировка body
- Расчет ширины скроллбара
- Предотвращение скачков
- Скролл внутри модального окна
- Мобильные устройства
- Альтернативные подходы
Вложенные модальные окна
- Открытие поверх открытых
- Управление z-index
- Последовательность закрытия
- Передача данных между окнами
- Ограничения и проблемы
Динамическое создание
- Генерация разметки
- Добавление в DOM
- Инициализация на лету
- Удаление после закрытия
- Шаблонизация
- Оптимизация производительности
Формы в модальных окнах
- Отправка данных
- Валидация
- Обработка ошибок
- Предотвращение закрытия
- Ajax-запросы
- Загрузка состояний
Интеграция с фреймворками
- React
- Svelte
- Wrapper-компоненты
- Реактивность и lifecycle
Медиаконтент
- Изображения
- Видео
- Iframe
- Ленивая загрузка
- Размеры и пропорции
- Адаптация под устройства
Множественные триггеры
- Несколько кнопок открытия
- Делегирование событий
- Динамические триггеры
- Программное связывание
Передача данных
- Через data-атрибуты
- Через JavaScript
- Использование в callbacks
- Глобальное состояние
- Локальное состояние
Производительность
- Минимизация reflow
- Оптимизация анимаций
- Lazy initialization
- Дебаунсинг событий
- Профилирование
- Рекомендации
Отладка
- Режим debug
- Логирование
- Проверка инициализации
- Поиск утечек памяти
- Инструменты разработчика
Расширенные сценарии
- Галереи изображений
- Многошаговые формы
- Подтверждение действий
- Уведомления
- Авторизация
- Всплывающие подсказки
Миграция и обновление
- Переход с других библиотек
- Обновление версий
- Breaking changes
- Обратная совместимость
Альтернативы и сравнение
- Bootstrap modal
- jQuery UI dialog
- Нативный dialog
- Критерии выбора
Проблемы и решения
- Конфликты с другими библиотеками
- Проблемы позиционирования
- Баги в старых браузерах
- Mobile Safari особенности
- Несрабатывание событий
- Память и утечки