莫代尔将不会关闭并使用退出键

Question

我正在使用修改后的推拉菜单（http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/）获取网页上的覆盖图。 虽然它按我想要的方式工作，但似乎无法集成如何按下转义键来关闭它。任何帮助表示赞赏，谢谢。

的jsfiddle（带（非工作代码）：https://jsfiddle.net/kreemers/0f5kv3px/

的jsfiddle（工作模式，而不ESC）：https://jsfiddle.net/kreemers/0f5kv3px/3/

HTML：

<nav class="modal modal-vertical modal-right" id="modal"> 
    <h1>CONTENT</h1> 
</nav> 

<h1 id="showRight">OPEN</h1> 
<h1 id="hideRight">CLOSE</h1> 

CSS：

/* GENERAL */ 

.modal { 
    background: yellow; 
    position: fixed; 
    margin-left: 20px; 
} 

h1 { 
    margin-left: 20px; 
} 


/* Orientation-dependent styles for the content of the menu */ 

.modal-vertical { 
    width: 60%; 
    height: 100%; 
    top: 0; 
    z-index: 1000; 
} 

.modal-right { 
    right: -60%; 
} 

.modal-open { 
    right: 0px; 
} 


/* Push classes applied to the body */ 

.modal-push { 
    overflow-x: hidden; 
    position: relative; 
    left: 0; 
} 


/* TRANSITION */ 

.modal, 
.modal-push { 
    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    transition: all 0.6s ease; 
} 

/* MODAL*/ 
var 
    menuRight = document.getElementById('modal'), 
    body = document.body; 



showRight.onclick = function() { 
    classie.removeClass(hideRight, 'active'); 
    classie.addClass(this, 'active'); 
    classie.addClass(menuRight, 'modal-open'); 
    disableOther('showRight'); 
}; 

hideRight.onclick = function() { 
    classie.removeClass(showRight, 'active'); 
    classie.addClass(this, 'active'); 
    classie.removeClass(menuRight, 'modal-open'); 
    disableOther('hideRight'); 
}; 


function disableOther(button) { 
    if (button !== 'showRight') { 
    classie.toggle(showRight, 'disabled'); 
    } 
}; 



/* CLOSING MODAL WITH ESC THAT ISN'T WORKING*/ 
$(document).click(function() { 
    if (isOpen) { 
    classie.removeClass(menuRight, 'modal-open'); 
    classie.addClass(this, 'active'); 
    } 
}); 

$(document).keyup(function(e) { 
    // ESCAPE key pressed 
    if (e.keyCode == 27) { 
    if (isOpen) { 
     classie.addClass(this, 'active'); 
     disableOther('hideRight'); 
    } 
    } 
}); 


/* 
* classie - class helper functions 
* from bonzo https://github.com/ded/bonzo 
*/ 

(function(window) { 

    'use strict'; 

    // class helper functions from bonzo https://github.com/ded/bonzo 

    function classReg(className) { 
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 
    } 

    // classList support for class management 
    // altho to be fair, the api sucks because it won't accept multiple classes at once 
    var hasClass, addClass, removeClass; 

    if ('classList' in document.documentElement) { 
    hasClass = function(elem, c) { 
     return elem.classList.contains(c); 
    }; 
    addClass = function(elem, c) { 
     elem.classList.add(c); 
    }; 
    removeClass = function(elem, c) { 
     elem.classList.remove(c); 
    }; 
    } else { 
    hasClass = function(elem, c) { 
     return classReg(c).test(elem.className); 
    }; 
    addClass = function(elem, c) { 
     if (!hasClass(elem, c)) { 
     elem.className = elem.className + ' ' + c; 
     } 
    }; 
    removeClass = function(elem, c) { 
     elem.className = elem.className.replace(classReg(c), ' '); 
    }; 
    } 

    function toggleClass(elem, c) { 
    var fn = hasClass(elem, c) ? removeClass : addClass; 
    fn(elem, c); 
    } 

    window.classie = { 
    // full names 
    hasClass: hasClass, 
    addClass: addClass, 
    removeClass: removeClass, 
    toggleClass: toggleClass, 
    // short names 
    has: hasClass, 
    add: addClass, 
    remove: removeClass, 
    toggle: toggleClass 
    }; 

})(window); 

Answer 1

您可以添加 “的onkeyup” 事件：

var 
    menuRight = document.getElementById('modal'), 
    body = document.body; 



showRight.onclick = function() { 
    classie.removeClass(hideRight, 'active'); 
    classie.addClass(this, 'active'); 
    classie.addClass(menuRight, 'modal-open'); 
    disableOther('showRight'); 
}; 

document.onkeyup = function(event){ 
    var x = event.keyCode; 
    if(x == 27){ 
    hideRight.click(); 
    } 
} 

hideRight.onclick = function() { 
    classie.removeClass(showRight, 'active'); 
    classie.addClass(this, 'active'); 
    classie.removeClass(menuRight, 'modal-open'); 
    disableOther('hideRight'); 
}; 


function disableOther(button) { 
    if (button !== 'showRight') { 
    classie.toggle(showRight, 'disabled'); 
    } 
}; 

的jsfiddle：https://jsfiddle.net/0f5kv3px/7/