無法關閉翻轉模式

我正在使用修改後的版本的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

無法關閉翻轉模式

回答

相關問題