Всплывающее окно jQuery
При нажатии на ссылку будет плавно появляться всплывающее окно, затемняя остальной контент сайта. И также плавно будет закрываться окно при клике на крестик или вне окна.
Создание плавно всплывающего окна
с использованием библиотеки jQuery
В HTML создадим ссылку, блок для контента, крестик для закрытия окна и оверлей для затемнения.
<a class="myLinkModal" href="#">Анкор_ссылки</a>
<div id="myModal">
<p>Контент</p>
<span id="myModal__close" class="close">ₓ</span>
</div>
<div id="myOverlay"></div>
Стилизуем всплывающее окно: зададим ему ширину, высоту, цвет, спозиционируем по центру экрана.
#myModal {
width: 298px; height: 218px;
padding: 18px 9px;
border-radius: 4px;
background: #fafafa;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
display: none;
opacity: 0;
z-index: 38;
text-align: center;
}
Стили кнопки закрытия окна: зададим размеры и спозиционируем в правом верхнем углу.
#myModal #myModal__close {
width: 21px; height: 21px;
position: absolute;
font-size: 29px;
top: 1px; right: 11px;
cursor: pointer;
display: block;
}
Стилизуем затемнение экрана: расположим затемнение на весь экран, цвет чёрный с непрозрачностью 70% и z-index, меньшим, чем у всплывающего окна, чтобы затемнение не перекрывало само окно.
#myOverlay {
z-index: 37;
position: fixed;
background: rgba(0,0,0,.7);
width: 100%; height: 100%;
top: 0; left: 0;
cursor: pointer;
display: none;
}
jQuery код: отменим стандартное событие по клику на ссылку, зададим плавное затемнение при клике на элемент a.myLinkModal (ссылка с классом myLinkModal), а также добавим плавности для закрытия (будет закрываться при нажатии вне всплывающего окна или на крестик).
$(document).ready(function () {
$("a.myLinkModal").click(function (event) {
event.preventDefault();
$("#myOverlay").fadeIn(297, function () {
$("#myModal")
.css("display", "block")
.animate({ opacity: 1 }, 198);
});
});
$("#myModal__close, #myOverlay").click(function () {
$("#myModal").animate({ opacity: 0 }, 198, function () {
$(this).css("display", "none");
$("#myOverlay").fadeOut(297);
});
});
});
К проекту должен быть подключен jQuery.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (5)
- Георг
- Сергей
- Фейк
- алмаз
- СоседскийМальчик