Начнем с того, что этот инструмент работает во всех современных браузерах. В случае 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
Комментарии
При открытии/закрытии окна все содержимое сайта, которое в абсолютно позиционированных контейнерах, дергается в сторону.
Например, дергается header с position:fixed
Как можно решить эту проблему?)
(Что касается моей задачи я сделал так что бы этот плагин выводил фото в модальном окне с галереи фото и добавил две функции что бы можно было листать фото в модальном окне вправо и лево) Так вот к примеру открыл я картинку номер один пролетал до пятой, и потом закрыл, после этого мне захотелось открыть картинку номер 2 и когда я ее открываю то у меня открывается картинка номер пять на которой остановил предыдущий просмотр галереи. Вот собственно вопрос может кто то сталкивался с такой задачей (нужно сделать так что бы открывалась картинка номер 2 а не открывалась та на которой я остановился в предыдущий раз)
Вопрос: какой скрипт нужно написать чтобы при нажатии по ссылке, модальное окно закрывалось?
меню с ссылками, но когда я нажимаю на ссылку модальное окно не исчезает, хочу чтобы исчезала
Спасибо.
$(document).on('opening', '.remodal', function () {
// здесь добавляем код для загрузки содержимого модального окна с помощью jQuery
});
Также можете почитать документацию на GitHub.
Спасибо, Матвей.
Следует проверить идею на деле
Я же нашёл такой выход.
Поскольку модальных окон на странице очень много, чтобы не задерживать загрузку содержимого для пользователя,
необходимые данные для загрузки изображения, а именно путь к изображению мы будем хранить в самом теге img изображения, но не в атрибуте src, а в атрибуте data-src.
Вдобавок добавим класс delay, чтобы потом была возможность доступа к нему из JavaScript.
Функция отложенной загрузки изображений
function delayPics (picsArray) {
document.onreadystatechange = function(e) {
if ("complete" === document.readyState) {
for (var i = 0; i < picsArray.length; i +=1) {
picsArray.src = picsArray.dataset.src;
}
}
};
}
вызов;
delayPics (document.getElementsByClassName("delay"));
RSS лента комментариев этой записи