CODEWITHSUNDEEP
javascriptjqueryhtmloverlay
Ion Torres
Ion Torres

Reputation: 77

How can I close an overlay panel with the escape key

I'm stuck trying to close an overlay panel pressing the escape key.

I already added a cross button which closes the panel, but I need to do it easier by just pressing the "Escape" key on the keyboard.

HTML

<html>
    <head>
        <meta charset="UTF-8" />
        <title> Business Development </title>
    </head>
    <body>
        <div class="overlay overlay-contentpush">
            <button type="button" class="overlay-close">Close</button>
        </div>
    </body>
</html>

JavaScript

(function() {
    var container = document.querySelector( 'div.container' ),
        triggerBttn = document.getElementById( 'trigger-overlay' ),
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };


    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            classie.remove( overlay, 'open' );
            classie.remove( container, 'overlay-open' );
            classie.add( overlay, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( overlay, 'close' );
            };
            if( support.transitions ) {
                overlay.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
            classie.add( container, 'overlay-open' );
        }
    }

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

Upvotes: 1

Views: 3581

Answers (2)

EyrockScript
EyrockScript

Reputation: 26

$(document).bind('keydown',function(e){
  if ( e.which == 27 ) {
     console.log("Escape key!");
     // Attach your event here.
  };
});

Upvotes: 1

Michał
Michał

Reputation: 2484

This will help:

$( ".overlay " ).keypress(function(e) {
  if(e.which == 27 ){
    // close overlay
  }
});

Upvotes: 0

Related Questions