От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. На очереди у нас несколько плагинов для реализации модальных окон. И первый плагин из данного списка – это jQuery плагин SimpleModal. Данный плагин, как следует из названия, позволяет реализовать простой эффект модального окна. Вместе с тем это будет очень симпатичное модальное окно.
Итак, перейдем на официальный сайт плагина SimpleModal. Здесь можно ознакомиться с инструкцией по использованию плагина, посмотреть на примеры его работы и найти ссылку на скачивание. Также здесь можно найти ссылку на скачивание плагина. Ссылка ведет на сайт Google Code, где можно выбрать вариант скачивания плагина: мы можем скачать сам плагин или готовые примеры его использования на выбор. Давайте посмотрим базовый пример работы плагина.
Подключим библиотеку jQuery и файл плагина:
|
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.simplemodal-1.4.4.js"></script> |
И необходимая разметка. Нам потребуется блок, который и будет выполнять роль модального окна. Этот блок будет изначально скрыт свойством display: none. Также нам потребуется кнопка или ссылка, клик по которым будет открывать модальное окно.
|
1 2 3 4 5 |
<div id="basic-modal"> <h3>Это модальное окно</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, nihil!</p> </div> <button class="btn btn-success open-modal">Открыть окно</button> |
Скроем блок с модальным окном.
|
1 |
#basic-modal{display: none;} |
Осталось добавить магию плагина. Для этого вызовем метод modal() для модального окна при клике по кнопке:
|
1 2 3 4 5 6 |
$(function() { $('.open-modal').click(function(){ $('#basic-modal').modal(); return false; }); }); |
Если теперь кликнуть по кнопке, то мы увидим скрытое до клика модальное окно.
Окно вы можете оформить по своему вкусу или же взять предлагаемый набор стилей из примера работы плагина. Вот пример стилей:
|
1 2 3 4 5 6 7 8 9 10 |
/* Overlay */ #simplemodal-overlay {background-color:#000;} /* Container */ #simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;} #simplemodal-container .simplemodal-data {padding:8px;} #simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;} #simplemodal-container a {color:#ddd;} #simplemodal-container a.modalCloseImg {background:url(x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;} #simplemodal-container h3 {color:#84b8d9;} |
Также я возьму картинку x.png из базового примера и положу ее рядом с файлом index.html. Это изображение крестика, который закрывает модальное окно. Осталось проверить работу базового примера плагина, кликнув еще раз по кнопке.
Выглядит неплохо, мне нравится. Можете самостоятельно посмотреть другие примеры работы плагина. Ну а мы на этом остановимся. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
