Rápidamente se me ocurre algo como esto:
Código HTML:
<html>
<head>
<script>
function mostrar() {
document.getElementById("target").style.display = "block";
document.getElementById("overlay").style.display = "block";
}
function ocultar() {
document.getElementById("target").style.display = "none";
document.getElementById("overlay").style.display = "none";
}
</script>
<style>
#target {
display: none;
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
z-index: 1001;
}
#overlay {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<input type="button" value="pulsa aqui" onClick="mostrar()" />
<img src="images/header.jpg" id="target" onClick="ocultar()" />
<div id="overlay" onClick="ocultar()"></div>
</body>
</html>