Skip to content

Instantly share code, notes, and snippets.

@fbeuster fbeuster/flyout.html
Last active Aug 29, 2015

Embed
What would you like to do?
Creating a Fly Out Window with jQuery
<body>
<div class="flyWrap">
<div class="fly">
<div class="flyContent">Fensterinhalt</div>
</div>
</div>
...
</body>
/*** 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');
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.