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

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

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

(4 голосов)

В этой небольшой заметке хотелось бы познакомить читателя с одним полезным инструментом для показа модальных окон, который называется 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

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

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

Теги

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

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх