Создание всплывающих модальных окон с помощью плагина articmodal

Наполняя свой сайт различными фишками, которые повышают интерактивность всего сайта, я столкнулся с проблемой создания модальных окон.

Сразу открыв мною любимый Google, я ввел в поисковую строку модальные окна jquery, и начал жадно переходить по ссылкам. Пролистав множество сайтов, я выбрал для себя плагин для создания модальных окон - articmodal. Он понравился мне своей минималистичностью (если взглянуть на мой сайт, можно увидеть что я люблю минимализм), простотой в настройке и подключении.

Итак, разберем, из чего состоит плагин для создания модальных окон articmodal:

  • articmodal.css - Стили нашего модального окна
  • articmodal.js - Сам плагин, состоящий из скрипта на jquery

Подключаем css-стили и скрипты нашего плагина для создания модальных окон.

Плагин articmodal имеет следующую HTML разметку:

<div style="display: none;">
    <div class="box-modal" id="exampleModal">
        <div class="box-modal_close arcticmodal-close">закрыть</div>
        Пример модального окна
    </div>
</div>

Запуск скрипта производиться следующим образом:

$(function(){
    $('#exampleModal').arcticmodal();
});

Как видно из кода, плагин articmodal запрашивает элемент с ID – exampleModal, и создает из него модальное окно.

Прошло некоторое время, с того момента как я начал пользоваться плагином для создания модальных окон articmodal, и в связи с некоторыми потребностями, я создал простую функцию, которая значительно упрощает использование плагина articmodal. Выглядит эта функция так:

function modalBox(addclass, preloader) {
	var c = $('<div class="box-modal '+addclass+'" />');
	$.arcticmodal({
		content: c
	});
	if(preloader==true) {
		$("."+addclass).html('<center><img src="/images/loader.gif"></center>');
	}
}

// Запуск модального окна без загрузчика
modalBox("status", false);

// Запуск модального окна с загрузчиком
modalBox("status", true);

Все предельно просто, функция создает модальное окно articmodal, принимая 2 аргумента – addclass привязывает класс к модальному окну, для дальнейших манипуляций с ним (вывод данных и т.п.). И preloader - принимает значения true и false. В случае создания модального окна перед загрузкой данных, можно поставить true и у Вас будет появляться(с условием наличия анимации в соответствующей папке) анимация загрузки.

Скачать плагин для создания модальных окон articmodal

Поддержка браузерами:
Поддержка браузером IEIE8+ Поддержка браузером Chrome Поддержка браузером FireFox Поддержка браузером Opera Поддержка браузером Safari