Estiva,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery.fn.center = function()
{
var w = $(window);
this.css("position","absolute");
this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
return this;
}
function creatOverlay(){
var docHeight = $(document).height();
$("<div id='overlay'></div>")
.appendTo("body")
.height(docHeight)
.css({
'opacity': 0.4,
'position': 'fixed',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
$(this).clone().appendTo("body").center().css({'z-index': 5001}).attr({'id' : 'cln'})
}
function remov()
{
$("#overlay, #cln").remove();
}
$(document).on({"click": creatOverlay}, "img")
$(document).on({"click": remov}, "#overlay, #cln")
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" >
<img src="http://javascript.ru/forum/images/smilies/write.gif" alt="" >
</body>
</html>