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