Всплывающее окно 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.
Результат
See the Pen Pop-up Window by Nikolay (@Only-to-top) on CodePen.
English | Russian |
---|---|
Event | Событие |
Fade-in | Постепенное появление |
Fade-out | Постепенное исчезновение |
Opacity | Непрозрачность |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.