Модальні вікна з гарними ефектами

Сьогодні ми хочемо поділитися скриптами модальних вікон з красивими ефектами. Різних варіацій дуже багато, так що кожен зможе знайти своє.

Ідея в тому, що модальне віконце потрібно показати при кліці на кнопку (елемент сторінки); далі піде приємна анімація і власне з'являється вікно.

На версіях iOS <6 мобильной версии Safari, могут быть проблемы с отображением.

Структура модального вікна ділиться на контейнер і контент:

Основний контейнер буде відображатися або ховатися (використовуючи клас "md-show"), а внутрішній контент буде анімований. Оформляємо вікна наступними селекторами:

Для деяких ефектів додамо клас html елементів. Особливо для застосування 3D ефектів. Зауважте це, що ми застосовуємо все це до всієї сторінці і контенту:

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

У кнопок скористаємося атрибутом data- * для того щоб задати джерело контенту модального вікна:

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

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!