вариант на основе 1 сообщения в теме ... кнопку закрыть смотреть на последнем фото ... строки 65 и 181 для проверки
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">body{
margin:0;
}
.image{
margin:30px;
float:left;
cursor:pointer;
max-height:100px;
}
.popup{
position:absolute;
height:auto;
width:100%;
top:0;
left:0;
display:none;
text-align:center;
min-height:100%;
}
.popup_bg{
background:rgba(0,0,0,0.4);
position:absolute;
z-index:1;
height:100%;
width:100%;
}
.popup_bg:after{
content:"X";
color:#FFF;
font-size:24px;
position:fixed;
right:-55px;
top:40px;
z-index:100;
}
.popup_img{
position:relative;
margin:3% auto;
z-index:2;
text-align:center;
max-height:94%;
max-width:94%;
border:solid rgba(255,255,255,1) .5em;
}
body.hide *{
display:none;
}
body.hide .popup *{
display:block;
}
p{
height:2000px;
}
.open-close-button{
margin-top:3%;
top:1%;
z-index:100;
left:93%;
display:inline-block;
width:.5em;
height:.5em;
font-size:3em;
border-radius:50%;
position:absolute;
transition:top 1.2s ease-in-out;
}
.open-close-button:before,.open-close-button:after{
transform:rotate(135deg);
content:"";
display:block;
position:absolute;
background:#FFF;
width:80%;
height:12%;
left:12%;
top:44%;
}
.open-close-button:after{
transform:rotate(45deg);
}
.open-close-button.shadow{
animation:bc 1.2s ease-in-out forwards;
}
.open-close-button:hover{
cursor:pointer;
animation:bc 1.2s ease-in-out infinite;
}
@keyframes bc{
0%{
background-color:rgba(224,255,255,.3);
box-shadow:0px 0px 58px 0px rgba(224,255,255,1);
transform:scale(1.2);
}
25%{
transform:scale(1);
box-shadow:0px 0px 0px 0px rgba(224,255,255,1);
}
50%{
box-shadow:0px 0px 58px 0px rgba(224,255,255,1);
transform:scale(1.2);
}
75%{
transform:scale(1);
box-shadow:0px 0px 0px 0px rgba(224,255,255,1);
}
100%{
background-color:transparent;
box-shadow:none;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var d, a = $(window), e = $("body"), f;
$(".image").click(function() {
function b() {
window.clearTimeout(f);
f = window.setTimeout(function() {
var b = g.getBoundingClientRect();
c.style.top = b.top < 0 ? a.scrollTop()+"px" : "";
c.style.marginTop = b.top < 0 ? '5px' : '3%';
c.style.left = b.right - 37 + "px";
c.classList.add("shadow");
}, 80);
}
d = a.scrollTop();
var h = this.src;
e.addClass("hide").append("<div class='popup'><div class='open-close-button'></div><div class='popup_bg'></div><img src='" + h + "' class='popup_img' /></div>");
a.scrollTop(0);
var g = document.querySelector(".popup_img"), c = document.querySelector(".open-close-button");
a.resize(b).trigger("resize");
$(".open-close-button").on("transitionend", function(a) {
$(this).removeClass("shadow");
});
$(".popup").fadeIn(800);
$(document).on("scroll", b);
$(".popup_bg, .open-close-button").click(function() {
$(".popup").fadeOut(800, function() {
e.removeClass("hide");
a.scrollTop(d);
$(document).off("scroll", b);
a.off("resize", b);
$(".popup").remove();
});
});
});
});
</script>
</head>
<body>
<img src="https://img.fonwall.ru/o/0x/devushka-i-drakon-fantastika-art.jpg" alt="" class="image">
<img src="http://mtdata.ru/u18/photoD2A8/20290971193-0/original.jpeg" alt="" class="image">
<img src="https://img3.goodfon.ru/original/1920x1408/b/61/art-devushka-vzglyad-zrachok.jpg" alt="" class="image">
<p></p>
<img src="http://www.снежинки-добавил-dmytrij82-www.setwalls.ru/pic/201304/2560x1440/setwalls.ru-24633.jpg" alt="" class="image">
<img src="https://grandgames.net/puzzle/source/devushka_i_drakoni.jpg" alt="" class="image">
<img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-281479.jpg" alt="" class="image">
</body>
</html>