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