Для затемнения сайта достаточно добавить в верстку <div>
и CSS стили к нему:
.popup-fade:before {
content: '';
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.7;
z-index: 9999;
}
Стили задаются псевдоклассом :before
для того чтобы opacity
не влиял на контент, который будет в этом блоке. Полупрозрачный фон будет растянут на все окно браузера.
Добавим в div.popup-fade
блок с контентом, ссылку «закрыть» и стили для них.
<div class="popup-fade">
<div class="popup">
<a class="popup-close" href="#">Закрыть</a>
<p>Всплывающие окна имеют широкий диапазон применений...</p>
</div>
</div>
.popup {
position: fixed;
top: 20%;
left: 50%;
padding: 20px;
width: 360px;
margin-left: -200px;
background: #fff;
border: 1px solid orange;
border-radius: 4px;
z-index: 99999;
opacity: 1;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
}
$(document).ready(function($) {
// Клик по ссылке "Закрыть".
$('.popup-close').click(function() {
$(this).parents('.popup-fade').fadeOut();
return false;
});
// Закрытие по клавише Esc.
$(document).keydown(function(e) {
if (e.keyCode === 27) {
e.stopPropagation();
$('.popup-fade').fadeOut();
}
});
// Клик по фону, но не по окну.
$('.popup-fade').click(function(e) {
if ($(e.target).closest('.popup').length == 0) {
$(this).fadeOut();
}
});
});
Для реализации popup-а достаточно скрыть блок .popup-fade
и добавить событие для открытия окна.
<a class="popup-open" href="#">Открыть popup</a>
<div class="popup-fade">
<div class="popup">
<a class="popup-close" href="#">Закрыть</a>
<p>Всплывающие окна имеют широкий диапазон применений...</p>
</div>
</div>
<style>
.popup-fade {
display: none;
}
.popup-fade:before {
content: '';
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.7;
z-index: 9999;
}
.popup {
position: fixed;
top: 20%;
left: 50%;
padding: 20px;
width: 360px;
margin-left: -200px;
background: #fff;
border: 1px solid orange;
border-radius: 4px;
z-index: 99999;
opacity: 1;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.popup-open').click(function() {
$('.popup-fade').fadeIn();
return false;
});
$('.popup-close').click(function() {
$(this).parents('.popup-fade').fadeOut();
return false;
});
$(document).keydown(function(e) {
if (e.keyCode === 27) {
e.stopPropagation();
$('.popup-fade').fadeOut();
}
});
$('.popup-fade').click(function(e) {
if ($(e.target).closest('.popup').length == 0) {
$(this).fadeOut();
}
});
});
</script>
Подскажите, а как реализовать это решение для следующей задачи:
На странице расположены несколько превьюшек изображений по ходу статьи.
Нужно чтобы по клику на превьюхе, в модальном окне, открывался соотвтествующий ей хайрез.
Пробовал разные стили назначать, но открываются всё равно сразу все, просто в одну колонку ((
Авторизуйтесь, чтобы добавить комментарий.