I’ve customized the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on a webpage. Although it functions as intended, I’m struggling to implement a way to close it by pressing the escape key. Any assistance would be greatly appreciated. Thank you.
jsfiddle (with non-working code): https://jsfiddle.net/kreemers/0f5kv3px/
jsfiddle (working modal without ESC functionality): 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;
}
JAVASCRIPT:
/* 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
// although, 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);