我试图按下退出键关闭覆盖面板。
我已经添加了一个关闭面板的十字按钮，但我只需按下键盘上的“Escape”键即可轻松完成。
<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>
(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 );
})();
答案 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
}
});