Cacher is the code snippet organizer for pro developers

/* CSS */
#layer {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.75);
	z-index: 9999;
}

.pp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s 0s, visibility 0s .5s;
	z-index: 10000;
}

.pp.active {
	opacity: 1;
	visibility: visible;
	transition: opacity .5s 0s, visibility 0s 0s;
}

.pp-close {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 40px;
	height: 40px;
	color: #d0d0d0;
	text-align: center;
	font: normal 20px/40px sans-serif;
	border: 1px solid #d8d8d8;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10002;
}

.pp-container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 500px;
	margin: -250px 0 0 -200px;
	padding: 20px;
	background-color: #f0f0f0;
	transform: translateY(-200px);
	transition-property: transform;
	transition-duration: .5s;
	z-index: 10001;
}

.active .pp-container {
	transform: translateY(0);
}

/* HTML */
<a href="#" data-pp="#pp_1" class="pp-open">Open 1</a>
<a href="#" data-pp="#pp_2" class="pp-open">Open 2</a>
<div class="pp" id="pp_1"><div class="pp-container"><div class="pp-close">X</div>1</div></div>
<div class="pp" id="pp_2"><div class="pp-container"><div class="pp-close">X</div>2</div></div>
<div id="layer"></div>

/* JS */
$(document).ready(function() {
	(function() {
		
		function pp_hide() {
			$('.pp').removeClass('active');
			$('#layer').hide();
		}
		
		$('body, #layer').on('click', function(e) {
			if (!$(e.target).closest('.pp-container').length) pp_hide();
		});
		
		$(document).on('click', '.pp-close', function() {
			pp_hide();
		});
		
		$(document).keyup(function(e) {
			if (e.keyCode==27) pp_hide();
		});
		
		$(document).on('click', '.pp-open', function(e) {
			e.preventDefault();
			e.stopPropagation();
			$('#layer').show();
			$($(this).data('pp')).addClass('active');
		});

	})();
});