Среда, 17 июня 2015 13:52

Remodal – jQuery-плагин для показа модальных окон

Оцените материал

(3 голосов)

В этой небольшой заметке хотелось бы познакомить читателя с одним полезным инструментом для показа модальных окон, который называется Remodal. Этим плагином можно пользоваться при создании адаптивных сайтов, он имеет довольно много различных настроек, которые разработчик может использовать при желании. При показе окон плагин пользуется средствами CSS-анимации. Ну что же, давайте познакомимся с ним поближе.

Начнем с того, что этот инструмент работает во всех современных браузерах. В случае IE — это 9 версия, хотя можно использовать его и в восьмой версии браузера, правда тогда нужно будет добавить элементу <html> класс lt-ie9. Перед подключением Remodal, необходимо подключить jQuery любой версии.

После небольшого введения, можно приступить непосредственно к использованию плагина.

Работа с плагином. Основные шаги.

Шаг 1. Скачаем его с официальной страницы на GitHub или с помощью менеджера пакетов (например, bower)

Шаг 2. Скопируем файлы (CSS и JS) из загруженного архива в соответствующие папки вашего проекта

Шаг 3. Подключим эти файлы в коде страницы — CSS подключаем в разделе <head> страницы, а JS – перед закрывающимся тегом </body>.

HTML

	<link rel="stylesheet" href="/path/to/css/remodal.css">
	<link rel="stylesheet" href="/path/to/css/remodal-default-theme.css">

	<script src="/path/to/js/remodal.min.js"></script>

Шаг 4. Вы можете создать блок-контейнер, который будет появляться при показе модального окна и создавать эффект затемнения страницы.

HTML

	<div class="remodal-bg">
		...Page content...
	</div>

Шаг 5. Затем создаем непосредственно само модальное окно. Это будет обычный HTML-элемент <div>, содержащий внутри себя примерно следующий код:

HTML

	<div class="remodal" data-remodal-id="modal">
 	<button data-remodal-action="close" class="remodal-close"></button>
  	<h1>Remodal</h1>
  	<p>Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.</p>
  	<br />
  	<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  	<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
	</div>

Шаг 6. Теперь, чтобы показать модальное окно, необходимо разместить на странице ссылку. При клике по ней будет вызываться созданное всплывающее окно.

Код ссылки может выглядеть так:

HTML

<a href="#modal">Call the modal with data-remodal-id="modal"</a>

или так:

HTML

<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>

Важно: для корректной работы 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.

<a data-remodal-target="modal" href="#">Call the modal with data-remodal-id="modal"</a>

closeOnConfirm (Default: true) - если значение этого параметра равно true, модальное окно исчезнет после клика по кнопке OK
closeOnCancel (Default: true) — если значение этого параметра равно true, модальное окно исчезает после клика по кнопке Cancel
closeOnEscape (Default: true) - если значение этого параметра равно true, модальное окно исчезает при нажатии кнопки Esc.
CloseOnOutsideClick (Default: true) – если значение этого параметра равно true, модальное окно исчезает при клике в любом свободном месте страницы.
Modifier (Default: '') - используется для изменения CSS-классов модального окна, фонового блока и «обертки».

Глобальные настройки

HTML

	<script>
		window.REMODAL_GLOBALS = {
		  NAMESPACE: 'modal',
		  DEFAULTS: {
			hashTracking: false
		  }
		};
	</script>
	<script src="/path/to/js/remodal.js"></script>

NAMESPACE — основной HTML-класс модальных окон. CSS-код должен быть обновлен с учетом этого класса.
DEFAULTS — расширение основных настроек.

Инициализация с помощью JavaScript - есть возможность инициализировать Remodal с помощью JavaScript. Если вы выбираете этот вариант, то использовать класс remodal не нужно.

HTML

	<div data-remodal-id="modal">
  	<button data-remodal-action="close" class="remodal-close"></button>
	  <h1>Remodal</h1>
	  <p>Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.</p>
	</div>
	<script>
	    var options = {...};
   	    $('[data-remodal-id=modal]').remodal(options);
	</script>

Методы объекта Remodal. Перед тем, как вызывать различные методы, получаем экземпляр объекта модального окна и сохраняем его в переменной:

JavaScript

	var inst = $('[data-remodal-id=modal]').remodal();

	/*Открываем модальное окно*/
	inst.open();
	/*Закрываем модальное окно*/
	inst.close();
	/*Получаем текущее состояние окна @returns {'closed'|'closing'|'opened'|'opening'} */
	inst.getState();
	/*Уничтожаем объект модального окна*/
	inst.destroy();

События Remodal, которые можно обрабатывать.

JavaScript

	$(document).on('opening', '.remodal', function () {
	  console.log('Modal is opening');
	});

	$(document).on('opened', '.remodal', function () {
	  console.log('Modal is opened');
	});

	$(document).on('closing', '.remodal', function (e) {

	  // Reason: 'confirmation', 'cancellation'
	  console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : ''));
	});

	$(document).on('closed', '.remodal', function (e) {

	  // Reason: 'confirmation', 'cancellation'
	  console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : ''));
	});

	$(document).on('confirmation', '.remodal', function () {
	  console.log('Confirmation button is clicked');
	});

	$(document).on('cancellation', '.remodal', function () {
	  console.log('Cancel button is clicked');
	});

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

Прочитано 16351 раз

Опубликовано в JavaScript, jQuery

Теги

Другие материалы в этой категории:
Lazyr.js - библиотека для «ленивой» загрузки изображений Список основных команд Bower

Добавить комментарий

Отличный плагин, но столкнулся с одной проблемой.
При открытии/закрытии окна все содержимое сайта, которое в абсолютно позиционированных контейнерах, дергается в сторону.

Например, дергается header с position:fixed

Как можно решить эту проблему?)

Ответить | Ответить с цитатой | Цитировать

0 # Александр 25.05.2016 12:18

Такая проблема я создал две формы на странице, первая работает хорошо, а вторая использует обработчик первой формы. Помогите!

Ответить | Ответить с цитатой | Цитировать

0 # Матвей 03.06.2016 12:04

Александр, вероятно вы напутали с идентификатором второй формы (data-remodal-id) и атрибутом ссылки на него

Ответить | Ответить с цитатой | Цитировать

0 # Alexandr 21.02.2016 02:05

Вот не могу понять где нужно поменять параметр что бы при повторном открытии модального окна окно открывалось заново. пробовал вместо hide использовать remove использовать не получилось

(Что касается моей задачи я сделал так что бы этот плагин выводил фото в модальном окне с галереи фото и добавил две функции что бы можно было листать фото в модальном окне вправо и лево) Так вот к примеру открыл я картинку номер один пролетал до пятой, и потом закрыл, после этого мне захотелось открыть картинку номер 2 и когда я ее открываю то у меня открывается картинка номер пять на которой остановил предыдущий просмотр галереи. Вот собственно вопрос может кто то сталкивался с такой задачей (нужно сделать так что бы открывалась картинка номер 2 а не открывалась та на которой я остановился в предыдущий раз)

Ответить | Ответить с цитатой | Цитировать

0 # Матвей 22.02.2016 10:06

Alexandr, возможно, вам стоит обратить внимание на метод destroy()

Ответить | Ответить с цитатой | Цитировать

0 # Дамир 19.01.2016 11:43

отличный плагин, хочу с помощью него сделать всплывающее меню (ссылки якоря на лэндинг пэйдж).

Вопрос: какой скрипт нужно написать чтобы при нажатии по ссылке, модальное окно закрывалось?

Ответить | Ответить с цитатой | Цитировать

0 # Матвей 19.01.2016 13:52

Дамир, немного не понял ваш замысел. Вы какую ссылку имеете в виду? Ведь ссылки на странице недоступны при появлении всплывающего окна. Все содержимое страницы затеняется.

Ответить | Ответить с цитатой | Цитировать

0 # Дамир 19.01.2016 14:02

хочу разместить в модальном окне, вместо формы или контента,
меню с ссылками, но когда я нажимаю на ссылку модальное окно не исчезает, хочу чтобы исчезала

Ответить | Ответить с цитатой | Цитировать

0 # Матвей 22.01.2016 14:22

Дамир, полагаю,что нужно написать обработчик кликов по этим ссылкам и добавить туда вызов метода для закрытия модального окна inst.close(); - см. выше

Ответить | Ответить с цитатой | Цитировать

0 # Михаил 19.11.2015 21:53

Как отложить загрузку содержимого модального окна до его вызова?
Спасибо.

Ответить | Ответить с цитатой | Цитировать

+1 # Матвей 23.11.2015 11:37

Михаил, возможно поможет следующий код:

$(document).on('opening', '.remodal', function () {
// здесь добавляем код для загрузки содержимого модального окна с помощью jQuery
});

Также можете почитать документацию на GitHub.

Ответить | Ответить с цитатой | Цитировать

0 # Михаил 19.01.2016 18:55

Цитирую Матвей:

Михаил, возможно поможет следующий код:

$(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 лента комментариев этой записи

Remodal – jQuery-плагин для показа модальных окон

Работа с плагином. Основные шаги.

Параметры и настройки. Более детальное рассмотрение Remodal.

Добавить комментарий

Комментарии