Топ плагинов jQuery. Плагин SimpleModal

Топ плагинов jQuery. Плагин SimpleModal

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. На очереди у нас несколько плагинов для реализации модальных окон. И первый плагин из данного списка – это jQuery плагин SimpleModal. Данный плагин, как следует из названия, позволяет реализовать простой эффект модального окна. Вместе с тем это будет очень симпатичное модальное окно.

Итак, перейдем на официальный сайт плагина SimpleModal. Здесь можно ознакомиться с инструкцией по использованию плагина, посмотреть на примеры его работы и найти ссылку на скачивание. Также здесь можно найти ссылку на скачивание плагина. Ссылка ведет на сайт Google Code, где можно выбрать вариант скачивания плагина: мы можем скачать сам плагин или готовые примеры его использования на выбор. Давайте посмотрим базовый пример работы плагина.

Топ плагинов jQuery. Плагин SimpleModal

Подключим библиотеку jQuery и файл плагина:

<script src="https://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. Также нам потребуется кнопка или ссылка, клик по которым будет открывать модальное окно.

<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>

Топ плагинов jQuery. Плагин SimpleModal

Скроем блок с модальным окном.

#basic-modal{display: none;}

Осталось добавить магию плагина. Для этого вызовем метод modal() для модального окна при клике по кнопке:

$(function() {
	$('.open-modal').click(function(){
		$('#basic-modal').modal();
		return false;
	});
});

Если теперь кликнуть по кнопке, то мы увидим скрытое до клика модальное окно.

Топ плагинов jQuery. Плагин SimpleModal

Окно вы можете оформить по своему вкусу или же взять предлагаемый набор стилей из примера работы плагина. Вот пример стилей:

/* 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. Плагин SimpleModal

Выглядит неплохо, мне нравится. Можете самостоятельно посмотреть другие примеры работы плагина. Ну а мы на этом остановимся. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree