Адаптивне модальне вікно для сайту

Відео: Як створити модальне вікно сторінки

Модальні вікна зараз вже не так популярні як раніше - це факт. Але красиво оформлені і плавно з`являються в потрібний момент (коли людина сама цього хоче) мають місце бути і їх можна використовувати. Але в якийсь момент людина сама вирішує щоб з`явилося модальне вікно? Наприклад, форма реєстрації та входу на сайт, детальна підказка, яка знаходиться в модальному вікні. Звичайно, вже всіх дратують ці вискакують модальні вікна, які тільки відлякують і відвідувачів і потенційних клієнтів. Але ми розглянемо більш цікавий спосіб використання модальних вікон на сайті.

дивитися прімерСкачать

Що потрібно для того, щоб модальне вікно заробило?

HTML

Підключаємо jQuery бібліотеку (Свіжу версію можна скачати тут) і плагін jquery.adaptive-modal.js з його таблицею стилів (Можна завантажити тут):

Далі в HTML документ в потрібне місце між тегами вставляємо наступне посилання з атрибутами href, data-toggle, data-title:

lt;bodygt; ..lt;a href="#" data-toggle="Adaptive-modal" data-title="Текст модального вікна"gt; Вмикач модального вікнаlt;/agt; ..lt;/bodygt;

Відео: Уроки javascript Практика # 6 Вчимося робити модальні вікна

Вуаля! Це все що потрібно для того щоб модальне вікно запрацювало. В атрибуті data-toggle ми пишемо значення data-toggle = "adaptive-modal», тим самим показуючи що це модальне вікно. А в атрибуті data-title пишемо весь текст модального вікна за допомогою при цьому необхідні теги (підтримуються всі HTML теги), щоб красиво оформити контент всередині вікна.

Для більш досвідчених

Можливості даного плагіна на цьому не закінчуються. Можливо ви хотіли б створити з таким чином форму входу / реєстрації на сайт (адже в такому випадку вона буде займати менше місця і виглядати у вигляді однієї кнопки).

Для того, щоб зробити це можливим HTML структура повинна виглядати так:

1234567891011

lt;a href="#form" style="Background: # 1ABC9C;" data-toggle="Adaptive-modal"gt; Відкрити модальне вікноlt;/agt;lt;div id="Form"gt;lt;h1gt; Вхід на сайтlt;/h1gt;lt;formgt;lt;input type="Text" placeholder="Логін"gt;lt;input type="Password" placeholder="Пароль"gt;lt;div class="Btns"gt;lt;a href="#" class="Am-trigger-close"gt; Ввійтиlt;/agt;lt;/divgt;lt;/formgt;lt;/divgt;

У цьому можна переконатися подивившись Демо 3.

І найцікавіше що може цей плагін - це показувати контент віддаленого сайту (іншими словами - стороннього сайту). Для цього дивіться Демо 5.

Тут використовуються AJAX запити, для отримання інформації методом GET з іншого сайту. Щоб краще зрозуміти як це працює давайте поглянемо на посилання виклику модального вікна:

1	lt;a class=`Am-remote-link` href="#" data-remote="True" data-datatype="Json" data-am-custom-class="Modal3"gt; Відкрити віддалений сайтlt;/agt;

Як бачите, в атрибуті href знаходиться адресу сторінки з необхідним вмістом. далі атрибут data-remote зі значенням true показує що стаття вантажитиметься ззовні. І, нарешті, атрибут data-datatype вказує на те, який формат даних буде приймати цей скрипт (в нашому прикладі це json).

Також хочу розповісти про можливості додавати свої дії перед появою модального вікна і після його зникнення.

Для цього використовуються дві функції beforeAnimate: function (el, status) і afterAnimate: function (el, status). Ось невеликий код з прикладом використання цих функцій:

123456789

$(".am-remote-link").adaptiveModal({beforeAnimate: function(el, status) {...}afterAnimate: function(el, status) {...}})-

висновок

Звичайно, я розглянув не всі функції цього, на перший погляд, простого плагіна. Але навіть їх досить щоб створити у себе на сайті красиві адаптивні модальні вікна з підказками або який-небудь додатковою інформацією.