Ноябрь 7, 2016 Запись была обновлена
Адаптивное модальное окно
Модальные окна сейчас уже не так популярны как раньше — это факт. Но красиво оформленные и плавно появляющиеся в нужный момент (когда человек сам этого хочет) имеют место быть и их можно использовать. Но в какой момент человек сам решает чтобы появилось модальное окно? Например, форма регистрации и входа на сайт, подробная подсказка, которая находится в модальном окне. Конечно, уже всех раздражают эти выскакивающие модальные окна, которые только отпугивают и посетителей и потенциальных клиентов. Но мы рассмотрим более интересный способ использования модальных окон на сайте.
Смотреть примерСкачать
Что нужно для того, чтобы модальное окно заработало?
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) { ... } }); |
Вывод
Конечно, я рассмотрел не все функции этого, на первый взгляд, простого плагина. Но даже их достаточно чтобы создать у себя на сайте красивые адаптивные модальные окна с подсказками или какой-нибудь дополнительной информацией.
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
разница между модальным окон не заметил! просто нажал кнопку и оно открылось, всё то же самое!
Подскажите пожалуйста, а в IE и Opera нельзя заставить работать эти окна?
Здравствуйте! Интересует именно пятый пример окна. Необходимо загружать в окно содержимое страниц извне, но вставляю другую ссылку и окно не открывается полностью, а лишь его шапка. Как правильно сделать? Вот еще пример http://jsfiddle.net/LNee5/14/ но при переносе на сайт внешняя страница открывается в новом окне, а модальное просто не показывается. Буду благодарен за совет. Спасибо!
Если открывается новая вкладка при нажатии на ссылку и при этом модальное окно не появляется, значит смотрите подключена ли библиотека jQuery. А затем посмотрите нет ли ошибок Javascript.
P.S. Также уберите у ссылки атрибут "target", если он присутствует.
Здравствуйте, подскажите пожалуйста, вот Демо 5 загружает данные с удаленного ресурса. А как загружать данные с другого файла?
Вот например, у меня есть html файл с информером погоды, данные поступают на него в реальном времени, как его прикрутить к Демо 5? Подскажите пожалуйста, я просто в этом полный ноль…
Вообще хочу сделать такое модальное окно, которое будет загружать файл с информером только после того, как окно откроется, и прекращать поток данных на информер, после закрытия окна…
А то выходит так, что обновляешь страницу на форуме и сразу все информеры загружаются, это очень увеличивает общую загрузку страницы…
Помогите пожалуйста, заранее спасибо!
Спасибо тебе !!! 200 раз спасибо, интересный сайт.
Эх =( при интеграции в CMS любую все события внутри этого модального окна не обрабатываются аякс плагинами, тоесть условно вставляю туда форму, но при клике на кнопку либо ничего не происходит (естественно если форма заполнена неправильно) либо происходит обновление страницы и потом при пофоторном выводе в модальном окне вслывает непосредственно само сообщение о ошибке =)))
Присоединяюсь к вопросу!
Возможно ли вставить в это окно виджет комментариев от VK?
Как не пробовал, не получается!
Получилось сделать только через iframe
Здравствуйте! Спасибо. Красиво. Но где адаптивность?
Красивые окна, и главное оттенок цвета здесь можно подобрать.