javascript - 如何使用转义键关闭覆盖面板 - Thinbug

如何使用转义键关闭覆盖面板

时间：2014-03-10 17:53:25

标签： javascript jquery html overlay

我试图按下退出键关闭覆盖面板。

我已经添加了一个关闭面板的十字按钮，但我只需按下键盘上的“Escape”键即可轻松完成。

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 );
})();

2 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：0)

这会有所帮助：

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