Alex00001,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
position:relative;
}
.image{
margin-top:1500px;
width:300px;
}
.popup img{
width:80%;
}
.popup_bg:after{
content:"x";
font-size:48px;
margin-top:50px;
display:block;
text-align:right;
}
.popup{
text-align:center;
position:absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".image").click(function() {
$(".popup").remove();
var src = this.src;
var top = $(window).scrollTop();
var popup = $("<div class='popup'><div class='popup_bg'></div><img src='" + src + "' class='popup_img'/></div>")
.css({
top: top
}).appendTo("body").hide().fadeIn(800);
$(".popup_bg", popup).click(function() {
popup.fadeOut(800, function() {
popup.remove();
});
});
});
});
</script>
</head>
<body>
<img src="http://okultureno.ru/upload/medialibrary/40e/bk_info_orig_75900_1474440457.jpg" class="image" alt="">
</body>
</html>