Cacher is the code snippet organizer for pro developers

<!-- overlay html -->
<div class="overlay-bg">
	<div class="overlay-content">
		PUT CONTENT HERE
	</div>
</div>

<!-- css -->
.overlay-bg {
	position: fixed;
	top: 0;
	left: 0;
	height:100%;
	width: 100%;
	cursor: pointer;
	z-index: 1000; /* high z-index */
	background: #000; /* fallback */
	background: rgba(0,0,0,0.75);
	display: none;
}
.overlay-content {
	background: #FFF;
	width: 1024px;
	height: 600px;
	position: relative;
	top: 10px;
	left: 50%;
	margin: 0 0 0 -512px; /* add negative left margin for half the width to center the div */
	cursor: pointer;
	box-shadow: 0 0 5px rgba(0,0,0,0.9);
	display: none;
}

/* jquery */
$("element-to-trigger-overlay").click(function(){
	$('.overlay-content').hide();
	$('.overlay-bg').hide();
});
$('.overlay-content').css('display','block');
	$('.overlay-bg').css('display','block');
});