arcticModal
Основные возможности
- одновременное отображение нескольких окон
- центрирование окна по вертикали и горизонтали
- AJAX-загрузка содержимого модального окна с визуализацией процесса
- скрытие полос прокрутки основного содержимого страницы (содержимое страницы не дёргается при отображении окна)
- возможность прокрутки окна, если оно не помещается на экран
- закрытие окна при нажатии Escape или клике на оверлее
Быстрый старт
Подключаем jQuery и плагин jquery.arcticmodal:
Code:
<script src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
<script src="js/arcticmodal/jquery.arcticmodal-0.2.min.js"></script>
<link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.2.css">
HTML-разметка:
Code:
<span onclick="$('#exampleModal1').arcticmodal()" id="#example1" class="">Простое модальное окно</span>
<div style="display: none;">
<div class="b-modal" id="exampleModal">
<div class="b-modal_close arcticmodal-close">X</div>
Пример модального окна
</div>
</div>
CSS:
Code:
.b-modal {
position: relative;
width: 500px;
padding: 24px;
background: #fff;
border: 3px solid #bbb;
border-radius: 10px;
}
.b-modal_close {
position: absolute;
right: 12px;
top: 6px;
font-weight: bold;
color: #999;
cursor: pointer;
}
.b-modal_close:hover {
color: #000;
}
JavaScript:
Code:
$(function(){
$('#exampleModal').arcticmodal();
});
jquery.arcticmodal-0.2.css
Code:
.arcticmodal-overlay,
.arcticmodal-container { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; }
.arcticmodal-container { overflow: auto; margin: 0; padding: 0; border: 0; border-collapse: collapse; }
*:first-child+html .arcticmodal-container { height: 100% }
.arcticmodal-container_i { height: 100%; margin: 0 auto; }
.arcticmodal-container_i2 { padding: 24px; margin: 0; border: 0; vertical-align: middle; }
.arcticmodal-error { padding: 20px; border-radius: 10px; background: #000; color: #fff; }
.arcticmodal-loading { width: 80px; height: 80px; border-radius: 10px; background: #000 url(loading.gif) no-repeat 50% 50%; }
Скачать: jquery.arcticmodal-0.2.zip
Проект на GitHub: https://github.com/vjik/arcticModal
Примеры
- Простое модальное окно
Code:
$('#exampleModal1').arcticmodal();
- Окно с большой высотой
Code:
var c = $('<div class="b-modal" />'); c.html($('.b-text').html()); c.prepend('<div class="b-modal_close arcticmodal-close">X</div>'); $.arcticmodal({ content: c });
- Кастомный оверлей
+ запрет на закрытие при клике по оверлею или нажатию на Escape
Code:
$('#exampleModal3').arcticmodal({ closeOnEsc: false, closeOnOverlayClick: false, overlay: { css: { backgroundColor: '#fff', backgroundImage: 'url(images/overlay.png)', backgroundRepeat: 'repeat', backgroundPosition: '50% 0', opacity: .75 } } });
- Пример событий
beforeOpen, afterOpen, beforeClose, afterClose
Code:
$('#exampleModal4').arcticmodal({ beforeOpen: function(data, el) { alert('beforeOpen'); }, afterOpen: function(data, el) { alert('afterOpen'); }, beforeClose: function(data, el) { alert('beforeClose'); }, afterClose: function(data, el) { alert('afterClose'); } });
- Несколько модальных окон
Code:
$('#exampleModal5_' + $(this).data('body')).arcticmodal();
- AJAX-загрузка окна и события afterLoading и afterLoadingOnShow
Code:
$.arcticmodal({ type: 'ajax', url: 'ajax/example.html.php', afterLoading: function(data, el) { alert('afterLoading'); }, afterLoadingOnShow: function(data, el) { alert('afterLoadingOnShow'); } });
- Сложная AJAX-загрузка со своим обработчиком
Code:
$.arcticmodal({
type: 'ajax',
url: 'ajax/example.json.php',
ajax: {
type: 'POST',
cache: false,
dataType: 'json',
success: function(data, el, responce) {
var h = $('<div class="b-modal">' +
'<div class="b-modal_close arcticmodal-close">X</div>' +
'<p><b /></p><p />' +
'</div>');
$('B', h).html(responce.title);
$('P:last', h).html(responce.text);
data.body.html(h);
}
}
});
Демо
Подробнее у разработчика
