1 547 В последнее время при создании сайтов модальные окна используются все реже. Модальное окно, появляющееся на экране неожиданно для пользователя и против его воли, только раздражает его или, того хуже, заставляет уйти со страницы. Однако при должном оформлении и своевременном отображении, модальные окна вполне гармонично вписываются в дизайн страницы и не раздражают посетителей.
Для этого они, в первую очередь, должны появляться только тогда, когда этого хочет сам пользователь. Примерами удачного использования модальных окон могут служить формы регистрации или входа в учетную запись пользователя на сайте, подсказки с решением наиболее часто возникающих проблем и т.д.
Если вы хотите добавить на свою страницу всплывающее окно, которое не дает пользователю просматривать страницу, пока он не закроет его (модальное), понадобится с соответствующим .css файлом и для его работы .
Для начала, проверим, подключена ли библиотека jQuery и нужный нам плагин. Затем, в тело документа (между тегами <body> </body>) добавим такую ссылку:
|
1 2 3 4 5 6 |
<body> .. <a href="#" data-toggle="adaptive-modal" data-title="Текст модального окна">Включатель модального окна</a> .. </body></pre> <pre class="html4strict"> |
Вот и все! Осталось задать некоторые атрибуты. В примере «adaptive-modal» является значением для атрибута data-toggle. Это значит, что мы хотим создать модальное окно. У атрибута data-title в роли значения выступает текстовое наполнение модального окна. Вы можете использовать любые HTML теги для оформления этого текста.
Однако, возможности применения этого плагина гораздо шире. С его помощью можно, к примеру, сделать форму входа в учетную запись либо форму регистрации нового пользователя. В отличие от стандартной, такая форма будет выглядеть как обычная кнопка и занимать совсем немного места.
Для того, чтоб у нас появилась такая замечательная форма, нам необходимо вставить на страницу следующий код:
|
1 |
<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> |
Одна из самых необычных функций этого плагина – функция просмотра информации, расположенной на стороннем сайте. Для этого применяются AJAX запросы. Данные передаются при помощи метода GET. Как это реализуется на практике можно увидеть ниже:
|
1 |
<a class='am-remote-link' href="http://api.dribbble.com/players/jackietrananh/shots?callback=?" data-remote="true" data-datatype="json" data-am-custom-class="modal3">Открыть удаленный сайт</a> |
Значением атрибута href служит адрес нужной нам страницы стороннего сайта. Атрибуту data-remote присваивается значение true. Это значит, что данная страница должна подгружаться извне. Формат данных, передаваемых в скрипт, задается атрибутом data-datatype. В данном случае значением этого атрибута является json.
Кроме того, до и после отображения модального окна можно задать различные действия. Это можно осуществить при помощи afterAnimate, а также функции beforeAnimate. Пример кода с использованием:
|
1 2 3 4 5 6 7 8 9 |
$(".am-remote-link").adaptiveModal({ beforeAnimate: function(el, status) { ... } afterAnimate: function(el, status) { ... } }); |
Функционал плагина не ограничивается перечисленными функциями. Но даже рассмотренной его части достаточно для создания на странице адаптивных модальных окон с необходимой информацией.
