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 } }
при вызове модального окна, но почему-то не сработало. Потому я внёс изменения в код.
19 Responses