ArcticModal — модальные окна маст хэв

Как вывести сайт в top? Платон Щукин говорит: «Делайте полезные сайты». Анонимус говорит: «Делайте полезные сайты, а я их буду парсить и объединять в мега-полезные, которые Яндекс полюбит ещё больше». Но не всё так просто, как на словах анонимуса. Сайты должны нравиться в первую очередь людям, а люди ценят удобство, простоту и приятный интерфейс.

Если вы разрабатываете сервис, то просто обязаны предоставить пользователям ajax-интерфейсы, в создании которых не обойтись без использования модальных окон.

Запрограммировать модальное окно — дело нехитрое для опытного JS-программиста. Я бы так и поступил, но счастливый случай привёл меня на сайт «Арктической лаборатории», где был скачан код модального окна «arcticModal». Сначала я использовал этот вариант ввиду нехватки времени — в течение дня мне надо было сдать проект. Но потом код перекочевал на другой коммерческий проект, а потом уже на мою собственную разработку, где и была разъюзана вся мощь модального окна «arcticModal».

В результате чего я решил сделать бесплатную рекламу этому бесплатному продукту и таким образом отблагодарить разработчиков. Избавлю вас от чтения красноречивого описания этой полезной штуковины. Лучше посмотрите примеры применения кода arcticModal на сайте разработчиков. Кому надо, тот сразу всё поймёт и возьмёт на вооружение код или забудет про него. А чтобы не выглядеть пиарщиком, сначала:

Минусы

Куда ж без них. В своём опыте пользования кодом (на данный момент — 2 лендинга, 2 корпоративных сайта и 1 частный проект в разработке) выявил несущественные минусы:

• хотелось бы чуть-чуть более подробной документации. У разработчиков на сайте, конечно, почти всё есть, но некоторые моменты я постигал только в изучении кода примеров, а до некоторых доходил своим умом (может и не самое элегантное решение получалось);
• при закрытии модальное окно не возвращает пару CSS-свойств тегу BODY в изначальное состояние. Например, любители «экзотического» так сказать кодинга могут заметить, что после закрытия окна «margin-right» у BODY становится равным нулю, даже если изначально он таковым не был. Лечится применением иструкции «!important» в стилях или коррекцией кода. Но лучше просто не делать такие дизайны, на отображение которых это влияет;
• есть функция скроллинга окна с большой высотой, при этом прокручивается только окно, а страница остаётся неподвижной — это плюс, жирный плюс! Но такой скроллинг работает только с использованием мыши, а с клавиатуры скроллится основной контент при сохранении неподвижности модального окна;
• можно использовать темы оформления (тоже плюс) но для полного редизайна всё же придётся залезть в файл жаваскрипт-кода. Например, для смены цвета и уровня прозрачности «оверлея».

Плюсы

• Всё остальное.

Сначала скажу главное, что делает достойным уважения любой продукт — это когда начинаешь использовать его даже там, где это не надо. В частности, я стал использовать модальное окно «arcticModal» просто для выполнения ajax-запроса. Ведь при написании кода запроса надо ещё подумать над интерфейсом ожидания для пользователя. А теперь у меня есть «arcticModal» — и думать об этом мне больше не надо. Достаточно вызвать:

$.arcticmodal( {
	type: 'ajax',
	url: 'ajax.php',
	errors: { 'ajax_unsuccessful_load': 'Ошибка запроса. Попробуйте ещё раз' },
	closeOnOverlayClick: false,
	ajax: {
		type: 'POST',
		data: 'var[1]=val1&var[2]=val2',
		cache: false,
		success: function( d, e, responce ) {
			/* можем что-то сделать после запроса
			и просто закрыть окно: */
			d.body.arcticmodal( 'close' ).click();
			/* а можем и вывести какое-нибудь сообщение
			например, результат запроса: */
			d.body.html(
				'<div class="box-modal">' +
				'<div class="box-modal_close arcticmodal-close">[ X ]</div>'
				+ responce +
				'</div>'
			);
		}
	}
} );

Всё просто, как в первом советском тракторе. В этом коде, кстати, я использовал фишку, не описанную в документации — закрытие модального окна таким кодом:

d.body.arcticmodal( 'close' ).click();

Просто предположил, что будет работать, и предположение подтвердилось. Но обычно достаточно вызывать функцию, которая закроет все модальные окна:

$.arcticmodal( 'close' );

А у меня вот такой случай:

Да, глаза вам не лгут: можно открывать новые модальные окна поверх других модальных окон, если для ваших целей это нужно. Например, в случае на скриншоте мне может быть нужно вернуться к предыдущему модальному окну после завершения работы в верхнем окне. Тогда мне нужно закрыть только верхнее окно, а не все.

Кстати, ещё вот такой способ закрытия окна использовал (тоже нет в документации):

$( '.arcticmodal-close', $( this ).closest( '.box-modal' ) ).click();

Это когда по нажатию «Enter» в текстовом поле для ввода на модальном окне я выполняю какие-то действия, после которых мне надо закрыть это окно (только верхнее):

$( 'input', $some_modal ).keypress( function( e ) {
	var keycode = ( e.keyCode ? e.keyCode : e.which );
	if ( keycode != '13' || ! this.value ) return;
	/* что-то делаю и закрываю окно: */
	$( '.arcticmodal-close', $( this ).closest( '.box-modal' ) ).click();
} );

Тут для закрытия я ищу элемент .arcticmodal-close в контексте родителя .box-modal для элемента this (тот самый input). И вызываю обработку клика по .arcticmodal-close, что закрывает окно.

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

P.S. Чтобы в глазах не рябило от чернеющего экрана во время обработки ajax-запросов, я поменял цвет «оверлея» (фон за пределами) модального окна с чёрного на белый и его непрозрачность уменьшил до 0.5. Логично было бы для этого просто указать:

overlay: { css: { backgroundColor: "#fff", opacity: .5 } }

при вызове модального окна, но почему-то не сработало. Потому я внёс изменения в код.