Creating a Fly Out Window with jQuery

## flyout.html
<body>
	<div class="flyWrap">
		<div class="fly">
			<div class="flyContent">Fensterinhalt</div>
		</div>
	</div>
	...
</body>

## scripts.js
/*** fly out ***/

$('.flyOpen').click(function(e) {
	showFly();
});

$('.flyWrap').mouseup(function(e) {
	$check = $('.fly');
	if(!$check.is(e.target)
		&& $check.has(e.target).length === 0) {
		hideFly();
	}
});

/*** key bindings ***/

$(document).keyup(function(e) {
	var keyCode = e.keyCode || e.which;
	if(keyCode == 27) {
		// esc
		if($('.flyWrap.e').length > 0) {
			hideFly();
		}
	}
});

/*** functions ***/

function showFly() {
	$('body').addClass('noScroll');
	$('.flyWrap').addClass('e');
}
function hideFly() {
	$('body').removeClass('noScroll');
	$('.flyWrap').removeClass('e');
}

## styles.css
.noScroll {
	overflow-y: hidden;
}
.flyWrap {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 100;
	background: rgba(0,0,0,0.5);
}
.flyWrap.e {
	display: block;
}
.fly {
	position: relative;
	top: 50%;
	margin: -125px auto 0px auto;
	width: 375px;
	height: 250px;
	overflow: hidden;
	border-radius: 5px;
	background: #fafafa;
	box-shadow: 0 0 10px #333333;
	color: #333333;
}