无法关闭翻转模式

我正在使用修改后的版本的codrops幻灯片&推送菜单（http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/）在网页上获取叠加层。但我无法再通过另一个链接关闭它。任何帮助，将不胜感激。的jsfiddle：http://jsfiddle.net/qu80jto2/无法关闭翻转模式

HTML：

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

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

JQUERY：

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

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

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

CSS：

.modal { 
    background: yellow; 
    position: fixed; 
} 

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

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

.modal-open { 
    right: 0px; 
} 

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

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

来源

2015-11-05 kreemers

你可以试试这个：

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

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

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


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

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

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

      function disableOther(button) { 
       if(button !== 'hideRight') { 
        classie.toggle(hideRight, 'disabled'); 
       } 
      } 
     </script>

DEMO HERE

来源

2015-11-05 10:49:25

完美的作品，谢谢。在这种情况下，是否还有办法在按下退出键时关闭模式？ – kreemers

http://jsfiddle.net/ivinraj/qu80jto2/4/ @kreemers –

转义关键似乎并没有在这个小提琴中被触发@ ivin-raj – kreemers

根据你的问题，你想开放 OR 滑入覆盖，当你点击打开和密切 OR 滑出当你点击关闭。

，那么这将做的伎俩你作为：

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

这里的工作JSFiddle

来源

2015-11-05 10:58:20 vivekkupadhyay

无法关闭翻转模式

回答

相关问题