Question

我正在使用改编的codrops slide＆amp;推送菜单（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;
}

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
  // 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/

Modal不会使用escape-key关闭

1 个答案: