От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. На очереди у нас несколько плагинов для реализации модальных окон. В этой статье мы познакомимся с безусловным лидером среди плагинов модальных окон – это плагин модальных окон с длинным названием Modal Window Effects.
Плагин модальных окон Modal Window Effects предлагает нам около двух десятков отличных эффектов появления модальных окон на выбор. Именно поэтому данный плагин я считаю лидером в своем роде. На странице демонстрации возможностей вы можете посмотреть каждый из эффектов и выбрать понравившиеся.
Теперь давайте реализуем парочку эффектов модальных окон. Для начала нам необходимо подключить несколько скриптов, вот они:
|
1 2 3 |
<script src="js/modernizr.custom.js"></script> <script src="js/classie.js"></script> <script src="js/modalEffects.js"></script> |
Обратите внимание, скрипт modernizr.custom.js должен быть подключен в тегах head. Остальные скрипты можно подключить перед закрывающим тегом body. Плагин не нуждается в библиотеке jQuery, поэтому подключать ее нет нужды.
Далее нам потребуются стили. Все необходимые стилевые правила я собрал в файле style.css, который вы можете взять из исходников статьи или из архива плагина. Поскольку плагин реализует множество различных эффектов модальных окон, стилей получилось достаточно много, но они того стоят. Если вам не нужны все эффекты, тогда ненужные можно убрать из файла стилей. Сделать это просто, все эффекты в файле стилей пронумерованы: .md-effect-1, .md-effect-2 и т.д.
Подключим файл стилей:
|
1 |
<link href="css/style.css" rel="stylesheet"> |
Теперь давайте создадим блок модального окна, кнопку и задний фон для модального окна:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="md-modal md-effect-1" id="modal-1"> <div class="md-content"> <h3>Fade in & Scale</h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, velit.</p> <button class="btn btn-default md-close">Close me!</button> </div> </div> </div> <button class="btn btn-success md-trigger" data-modal="modal-1">Fade in & Scale</button> <div class="md-overlay"></div> |
Как вы могли заметить, модальное окно имеет класс md-effect-1, это значит, что оно будет открываться с эффектом под номером 1 – это эффект плавного появления и увеличения. Также ключевым является класс md-modal, который должен присутствовать у всех модальных окон.
Связь модального окна с кнопкой происходит благодаря ID модального окна и атрибуту data-modal кнопки. Собственно все, можем пробовать. Сразу давайте создадим еще одно модальное окно с другим эффектом (выезжание справа) и кнопку появления этого модального окна:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="md-modal md-effect-2" id="modal-2"> <div class="md-content"> <h3>Slide in (right)</h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, velit.</p> <button class="btn btn-default md-close">Close me!</button> </div> </div> </div> <button class="btn btn-success md-trigger" data-modal="modal-2">Slide in (right)</button> |
Осталось проверить работу плагина и наслаждаться полученными эффектами открытия модальных окон.
Уверен, вам понравились эффекты, их разнообразие и вы будет использовать данный плагин модальных окон. Ну а у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
