Сегодня я расскажу о том, как сделать всплывающие окна на jQuery потратив на это 3 минуты своего времени. Данное решение будет включать в себя минимум кода.
К сравнению, в одной из предыдущих статей я описывал решение лайтбокса на JavaScript, где можно увидеть, насколько получился громоздкий код, и это ещё без адаптации под старые версии браузеров.
Давайте приступим и для начала подключим библиотеку и файл, в котором будет находиться скрипт всплывающих окон. Так же для удобства вынесем стили в отдельный CSS файл:
<link href="main.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="lightbox.js" type="text/javascript"></script>
Добавим на страницу HTML структуру:
<!-- Кнопка для вызова -->
<span class="button lightbox">
Нажми на меня
</span>
<!-- Вызываемый блок -->
<div id="block">
<div class="close"></div>
<p>Контент</p>
</div>
Теперь в CSS файле пропишем стили для кнопки и вызываемого блока:
body{
background-color: #d8d5d4;
}
#block{
width: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -140px;
border: 8px solid #D74745;
background-color: #E7E7E7;
border-radius: 9px;
text-align: center;
position: fixed;
display: none;
z-index: 9999;
}
.close{
background: url(close.png) no-repeat center center;
opacity: 0.5;
height: 12px;
width: 12px;
opacity: 0.5;
right: 7px;
top: 5px;
position: absolute;
cursor: pointer;
}
.close:hover{
opacity: 1;
}
.button{
cursor: pointer;
text-decoration: none;
background-color: #fff;
border-radius: 25px;
font: bold 50px Verdana;
color: #000;
letter-spacing: 10px;
padding: 5px 10px;
text-align: center;
border: 5px solid rgba(255, 0, 0, 0.6);
box-shadow: 0 0 30px rgba(24, 124, 204, 0.8),
1px 1px 1px rgba(0, 0, 0, 0.5) inset;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
width: 600px;
display: block;
margin: 100px auto 0;
}
.button:hover{
box-shadow: none;
}
После того, как мы закончили с подготовкой, у нас получилась стилизованная кнопка и блок, в который можно, в дальнейшем, поместить форму обратной связи, подсказку, кусок контента и прочее.
Осталось написать jQuery код. Выглядеть он будет так:
$(function(){
var block = $("#block");
$(".lightbox").on("click", function(){
$("<div id='overlay'></div>")
.css({
"height": "100%",
"position":"fixed",
"width": "100%",
"background": "#000",
"opacity": "0",
"top": "0",
"left": "0",
"z-index": "999"
})
.animate({"opacity": "0.5"}, "slow")
.appendTo("body");
block.fadeIn();
$("#overlay, .close").on("click", function(){
block.fadeOut("slow");
$("#overlay").fadeOut("slow", function(){
$(this).remove();
});
});
});
});
Скрипт можно разделить на логические части. Нажимая на кнопку с классом lightbox, через код мы добавляем задний фон, причем стили к нему прописываем «на лету», далее показываем сам блок, сохранённый в переменной block. Вторая часть - это обработка событий закрытия при нажатии на задний фон и на див с классом close. Вначале мы прячем блок, а затем скрываем сам фон, после чего - удаляем его.
В принципе всё довольно просто и должно быть понятно.