Начнем с того, что этот инструмент работает во всех современных браузерах. В случае IE — это 9 версия, хотя можно использовать его и в восьмой версии браузера, правда тогда нужно будет добавить элементу <html> класс lt-ie9. Перед подключением Remodal, необходимо подключить jQuery любой версии.
После небольшого введения, можно приступить непосредственно к использованию плагина.
Работа с плагином. Основные шаги.
Шаг 1. Скачаем его с официальной страницы на GitHub или с помощью менеджера пакетов (например, bower)
Шаг 2. Скопируем файлы (CSS и JS) из загруженного архива в соответствующие папки вашего проекта
Шаг 3. Подключим эти файлы в коде страницы — CSS подключаем в разделе <head> страницы, а JS – перед закрывающимся тегом </body>.
HTML
Шаг 4. Вы можете создать блок-контейнер, который будет появляться при показе модального окна и создавать эффект затемнения страницы.
HTML
Шаг 5. Затем создаем непосредственно само модальное окно. Это будет обычный HTML-элемент <div>, содержащий внутри себя примерно следующий код:
HTML
Шаг 6. Теперь, чтобы показать модальное окно, необходимо разместить на странице ссылку. При клике по ней будет вызываться созданное всплывающее окно.
Код ссылки может выглядеть так:
HTML
или так:
HTML
Важно: для корректной работы Remodal, при верстке блока с содержимым модального окна необходимо использовать атрибут data-remodal-id, а не id. Иначе сработает стандартное поведение и произойдет переход к указанному блоку.
Параметры и настройки. Более детальное рассмотрение Remodal.
Дополнительные параметры можно передавать внутри атрибута data-remodal-options корневого элемента всплывающего окна (div.remodal).
Например: data-remodal-options="hashTracking: false, closeOnOutsideClick: false"
Давайте ознакомимся с ними:
- hashTracking (Default: true) - для открытия модального окна используется значение атрибута data-remodal-target ссылки, вместо href.
- closeOnConfirm (Default: true) - если значение этого параметра равно true, модальное окно исчезнет после клика по кнопке OK
- closeOnCancel (Default: true) — если значение этого параметра равно true, модальное окно исчезает после клика по кнопке Cancel
- closeOnEscape (Default: true) - если значение этого параметра равно true, модальное окно исчезает при нажатии кнопки Esc.
- CloseOnOutsideClick (Default: true) – если значение этого параметра равно true, модальное окно исчезает при клике в любом свободном месте страницы.
- Modifier (Default: '') - используется для изменения CSS-классов модального окна, фонового блока и «обертки».
Глобальные настройки
HTML
- NAMESPACE — основной HTML-класс модальных окон. CSS-код должен быть обновлен с учетом этого класса.
- DEFAULTS — расширение основных настроек.
Инициализация с помощью JavaScript - есть возможность инициализировать Remodal с помощью JavaScript. Если вы выбираете этот вариант, то использовать класс remodal не нужно.
HTML
Методы объекта Remodal. Перед тем, как вызывать различные методы, получаем экземпляр объекта модального окна и сохраняем его в переменной:
JavaScript
События Remodal, которые можно обрабатывать.
JavaScript
CSS-классы плагина.
- .remodal — класс модального окна по-умолчанию
- .remodal-wrapper — дополнительная «обертка» к .remodal, применяется для корректного позиционирования блока.
- .remodal-overlay — класс для блока с затемнением. Находится над .remodal-wrapper.
- .remodal-bg — фоновый блок модального окна. Находится над блоком с затемнением.
Префикс remodal может быть заменен на другой путем изменения глобальных настроек плагина.
Состояние объекта модального окна отражается в следующих классах: .remodal, .remodal-overlay, .remodal-bg, .remodal-wrapper.
Например, .remodal-is-opening, .remodal-is-opened, .remodal-is-closing и .remodal-is-closed.
Классы .remodal, .remodal-overlay, .remodal-bg, .remodal-wrapper можно переопределять, указав модификатор в настройках плагина при инициализации. Например, в атрибуте data-remodal-options.
В заключении заметки хотелось бы сделать вывод: Remodal – довольно полезный инструмент, который поможет при создании новых проектов или обновлении старых. За счет интересного дизайна и анимационных эффектов при появлении модальных окон, этот инструмент можно использовать и при создании landing pages. Также плюсами Remodal — являются его «вес» и возможность адаптации под различные размеры экранов, в том числе и мобильных устройств.
На мой взгляд, это вполне достойный инструмент для реализации модальных окон на страницах сайтов.
Демо-страница
При создании заметки использовалась информация с https://github.com/VodkaBears/Remodal