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

27

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

Отже, перейдемо на офіційний сайт плагіна SimpleModal. Тут можна ознайомитися з інструкцією по використанню плагіна, подивитися на приклади його роботи та знайти посилання на скачування. Також тут можна знайти посилання на скачування плагіна. Посилання веде на сайт Google Code, де можна вибрати варіант завантаження плагіна: ми можемо завантажити сам плагін чи готові приклади його використання на вибір. Давайте подивимося базовий приклад роботи плагіна.

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

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

І необхідна розмітка. Нам потрібен блок, який і буде виконувати роль модального вікна. Цей блок буде спочатку прихований властивість display: none. Також нам потрібно кнопка або посилання, клік по яким буде відкривати модальне вікно.

Це модальний

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, nihil!

Відкрити вікно

Топ плагинов 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-a container.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 ви можете дізнатися з наших уроків або курсу. Удачі!