Модальные окна сейчас уже не так популярны как раньше — это факт. Но красиво оформленные и плавно появляющиеся в нужный момент (когда человек сам этого хочет) имеют место быть и их можно использовать. Но в какой момент человек сам решает чтобы появилось модальное окно? Например, форма регистрации и входа на сайт, подробная подсказка, которая находится в модальном окне. Конечно, уже всех раздражают эти выскакивающие модальные окна, которые только отпугивают и посетителей и потенциальных клиентов. Но мы рассмотрим более интересный способ использования модальных окон на сайте.
Смотреть примерСкачать
Что нужно для того, чтобы модальное окно заработало?
HTML
Подключаем jQuery библиотеку (свежую версию можно скачать здесь) и плагин jquery.adaptive-modal.js с его таблицей стилей (можно скачать здесь):
Далее в HTML документ в нужное место между тегами <body> </body> вставляем следующую ссылку с атрибутами href, data-toggle, data-title:
1 2 3 4 5 | <body> .. <a href="#" data-toggle="adaptive-modal" data-title="Текст модального окна">Включатель модального окна</a> .. </body> |
Вуаля! Это всё что нужно для того чтобы модальное окно заработало. В атрибуте data-toggle мы пишем значение data-toggle=»adaptive-modal», тем самым показывая что это модальное окно. А в атрибуте data-title пишем весь текст модального окна, используя при этом необходимые теги (поддерживаются все HTML теги), чтобы красиво оформить контент внутри окна.
Для более опытных
Возможности данного плагина на этом не заканчиваются. Возможно вы хотели бы создать с таким образом форму входа/регистрации на сайт (ведь в таком случае она будет занимать меньше места и выглядеть в виде одной кнопки).
Для того, чтобы сделать это возможным HTML структура должна выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 | <a href="#form" style="background: #1ABC9C;" data-toggle="adaptive-modal">Открыть модальное окно</a> <div id="form"> <h1>Вход на сайт</h1> <form> <input type="text" placeholder="Логин"> <input type="password" placeholder="Пароль"> <div class="btns"> <a href="#" class="am-trigger-close">Войти</a> </div> </form> </div> |
В этом можно убедиться посмотрев Демо 3.
И самое интересное что может этот плагин — это показывать контент удаленного сайта (иными словами — постороннего сайта). Для этого смотрите Демо 5.
Здесь используются AJAX запросы, для получения информации методом GET с другого сайта. Чтобы лучше понять как это работает давайте взглянем на ссылку вызова модального окна:
1 | <a class='am-remote-link' href="#" data-remote="true" data-datatype="json" data-am-custom-class="modal3">Открыть удаленный сайт</a> |
Как видите, в атрибуте href находится адрес страницы с необходимым содержимым. Далее атрибут data-remote со значением true показывает что страница будет грузиться извне. И, наконец, атрибут data-datatype указывает на то, какой формат данных будет принимать этот скрипт (в нашем примере это json).
Также хочу рассказать о возможности добавлять свои действия перед появлением модального окна и после его исчезновения.
Для этого используются две функции beforeAnimate: function(el, status) и afterAnimate: function(el, status). Вот небольшой код с примером использования этих функций:
1 2 3 4 5 6 7 8 9 | $(".am-remote-link").adaptiveModal({ beforeAnimate: function(el, status) { ... } afterAnimate: function(el, status) { ... } }); |
Вывод
Конечно, я рассмотрел не все функции этого, на первый взгляд, простого плагина. Но даже их достаточно чтобы создать у себя на сайте красивые адаптивные модальные окна с подсказками или какой-нибудь дополнительной информацией.
Успехов!
С Уважением, Юрий Немец