JQuery модальное окно
В статье я расскажу, как сделать простое JQuery модальное окно. Для кого-то результат окажется только заготовкой, т.к. он не универсален, но с уверенностью можно говорить, что это полноценное модальное окошко. Если Вам нужно одно простое окно на страницу, определенного размера, то это идеальный вариант.
Оформление настолько примитивное, что даже углы не закруглены, но зато есть затемнение фона. Уровень затемнения легко регулируется в CSS, там указывается прозрачность цвета фона у всего слоя. Содержимое JQuery модального окна может быть любое, но за пределы экрана выходить не стоит, по этой причине и регулируются размеры высоты и ширины в CSS.
Модальные окна нужны, чтобы показывать второстепенную информацию на странице. Делается это не только в целях экономии места, но и для того, чтобы излишне не нагружать страницу. Проще будет воспользоваться сворачиванием блоков, но это в итоге «растормошит» контент на сайте и скрытие элементов потеряет свой смысл.
CSS
#overlay {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:rgba(0,0,0,0.8);
display:none;
font-family: Georgia;
}
#boxes .window {
position:fixed;
left:0;
top:0;
display:none;
z-index:9999;
padding:20px;
text-align: center;
font-size: 25px;
}
#boxes #dialog {
width:400px;
height:300px;
padding:10px;
background-color:#ffffff;
text-align:left;
}
.close {
position:absolute;
margin-left:360px;margin-top:0px;
}
</style>
Селектор «.close» отвечает за кнопку закрытия, это понятно, но эта кнопка и не нужна в принципе, закрываться окно будет и по нажатию на затемненный фон.
В месте, где написано «#boxes #dialog», указываются размеры диалогового окошка, это важный момент. Плюс, указывается padding, а он, как известно, прибавляется к ширине и высоте.
Подключение JQuery
Установите следующий код в секцию <head> своего сайта.
JavaScript
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var overlayHeight = $(document).height();
var overlayWidth = $(window).width();
$('#overlay').css({'width':overlayWidth,'height':overlayHeight});
$('#overlay').fadeIn(500);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(500);
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#overlay, .window').fadeOut(200);
});
$('#overlay').click(function () {
$(this).fadeOut(200);
$('.window').fadeOut(200);
});
});
</script>
Скорость появления окна – 500 (что примерно равняется половине секунды), а скорость анимации при закрытии – 200. Такая разница сделана для видимости, чтобы было удобнее редактировать исходный код.
HTML
<div id="boxes">
<div id="dialog" class="window">
<a href="#" class="close">Закрыть</a>
Содержимое окна
</div>
<div id="overlay"></div>
</div>
Для того чтобы сделать какую-либо галерею или просто использовать несколько окно на странице, нужно создать JQuery плагин модального диалога или найти такой. Этой заготовки не хватит для таких планов, это всего лишь примитивный пример, урок для начинающего.
Полезные материалы к статье
Воспользуйтесь сервисом uKit. Никакого кода!
