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

Реализуйте библиотеку для создания модальных окон на сайте.

Основные возможности проекта

• Библиотека для создания модальных окон.
• Открытие и закрытие с анимацией.
• Блокировка прокрутки страницы при открытом окне.
• Закрытие по клику на затемнение или на кнопку.
• Поддержка кастомного содержимого (текст, HTML, формы).
• Публикация на GitHub с документацией.

Функциональность библиотеки

Библиотека должна предоставлять следующие возможности:

• Создание модального окна с произвольным содержимым.
• Открытие и закрытие с плавной анимацией.
• Блокировка прокрутки страницы при открытом окне.
• Закрытие по клику на затемнение (overlay).
• Закрытие по нажатию клавиши ESC.
• Поддержка кастомных кнопок и действий.

Параметры настройки

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

• title - заголовок модального окна.
• content - содержимое окна (текст, HTML-строка или DOM-элемент).
• buttons - массив кнопок (текст, класс, callback).
• animation - тип анимации (fade, slide, scale).
• closeOnOverlayClick - закрывать ли по клику на затемнение.
• closeOnEsc - закрывать ли по нажатию ESC.
• width - ширина окна (в пикселях или процентах).

Структура модального окна

Модальное окно должно содержать:

• Затемнение (overlay) на всю страницу.
• Окно с содержимым, центрированное по вертикали и горизонтали.
• Заголовок с кнопкой закрытия (крестик).
• Основной блок с содержимым.
• Блок с кнопками (footer).

Методы библиотеки

Библиотека должна предоставлять методы:

• create(config) - создает и возвращает модальное окно.
• open() - открывает окно.
• close() - закрывает окно.
• destroy() - удаляет окно из DOM.

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

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

• Подключить CSS-файл со стилями модальных окон.
• Подключить JS-файл с библиотекой.
• Создать модальное окно с настройками.
• Вызвать метод open() для показа окна.

Публикация на GitHub

Библиотека должна быть выложена на GitHub с:

• README.md с описанием и инструкцией по установке.
• Демо-страницей с примерами использования.
• Исходным кодом библиотеки.

Тестирование

Библиотека должна быть протестирована на:

• Разных браузерах (Chrome, Firefox, Safari, Edge).
• Разных типах содержимого (текст, формы, картинки, видео).
• Блокировке прокрутки на страницах с разным контентом.

Дополнительные возможности

• Стек модальных окон (открытие одного поверх другого).
• Анимация для каждого окна индивидуально.
• Поддержка форм с валидацией.