Как сделать адаптивное модальное окно на jquery

Как сделать адаптивное модальное окно на jquery?

В последнее время при создании сайтов модальные окна используются все реже. Модальное окно, появляющееся на экране неожиданно для пользователя и против его воли, только раздражает его или, того хуже, заставляет уйти со страницы. Однако при должном оформлении и своевременном отображении, модальные окна вполне гармонично вписываются в дизайн страницы и не раздражают посетителей.

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

Демо Скачать

Если вы хотите добавить на свою страницу всплывающее окно,  которое не дает пользователю просматривать страницу, пока он не закроет его (модальное), понадобится jquery.adaptive-modal.js с соответствующим .css файлом и  jQuery для его работы .

Для начала, проверим, подключена ли библиотека jQuery и нужный нам плагин. Затем, в тело документа (между тегами  <body> </body>) добавим такую ссылку:

Вот и все! Осталось задать некоторые атрибуты. В примере «adaptive-modal» является значением для атрибута data-toggle. Это значит, что мы хотим создать модальное окно. У атрибута data-title в роли значения выступает текстовое наполнение модального окна. Вы можете использовать любые HTML теги для оформления этого текста.

Однако, возможности применения этого плагина гораздо шире. С его помощью можно, к примеру, сделать форму входа в учетную запись либо форму регистрации нового пользователя. В отличие от стандартной, такая форма будет выглядеть как обычная кнопка и занимать совсем немного места.

Как сделать адаптивное модальное окно на jquery?

Для того, чтоб у нас появилась такая замечательная форма, нам необходимо вставить на страницу следующий код:

Одна из самых необычных функций этого плагина – функция просмотра информации, расположенной на стороннем сайте. Для этого применяются AJAX запросы. Данные передаются при помощи метода GET. Как это реализуется на практике можно увидеть ниже:

Значением атрибута href служит адрес нужной нам страницы стороннего сайта. Атрибуту data-remote присваивается значение true. Это значит, что данная страница должна подгружаться извне. Формат данных, передаваемых в скрипт, задается атрибутом data-datatype. В данном случае значением этого атрибута является json.

Кроме того, до и после отображения модального окна можно задать различные действия. Это можно осуществить при помощи afterAnimate, а также функции beforeAnimate.  Пример кода с использованием:

Функционал плагина не ограничивается перечисленными функциями.  Но даже рассмотренной его части достаточно для создания на странице адаптивных модальных окон с необходимой информацией.


Оставить комментарий