закрыть наложение полноэкранного меню

Question

Наложение на полноэкранном меню имеет кнопку закрытия, но я бы хотел закрыть наложение, нажав на сам накладной. Поэтому, если вы нажимаете вне меню на оверлее, наложение закрывается. То же самое, что и закрытие btw. Её код, но что добавить или изменить.

(function() { 
    var triggerBttn = document.getElementById('trigger-overlay'), 
     overlay = document.querySelector('div.overlay'), 
     closeBttn = overlay.querySelector('button.overlay-close'); 
     transEndEventNames = { 
      'WebkitTransition': 'webkitTransitionEnd', 
      'MozTransition': 'transitionend', 
      'OTransition': 'oTransitionEnd', 
      'msTransition': 'MSTransitionEnd', 
      'transition': 'transitionend' 
     }, 
     transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ], 
     support = { transitions : Modernizr.csstransitions }; 

    function toggleOverlay() { 
     if(classie.has(overlay, 'open')) { 
      classie.remove(overlay, 'open'); 
      classie.add(overlay, 'close'); 
      var onEndTransitionFn = function(ev) { 
       if(support.transitions) { 
        if(ev.propertyName !== 'visibility') return; 
        this.removeEventListener(transEndEventName, onEndTransitionFn); 
       } 
       classie.remove(overlay, 'close'); 
      }; 
      if(support.transitions) { 
       overlay.addEventListener(transEndEventName, onEndTransitionFn); 
      } 
      else { 
       onEndTransitionFn(); 
      } 
     } 
     else if(!classie.has(overlay, 'close')) { 
      classie.add(overlay, 'open'); 
     } 
    } 

    triggerBttn.addEventListener('click', toggleOverlay); 
    closeBttn.addEventListener('click', toggleOverlay); 
})(); 

Answer 1

Все, что вам нужно сделать, это разместить прослушиватель событий для «щелчка» по всему оверлейному div.

overlay.addEventListener('click', toggleOverlay); 

В нижней

Answer 2

closeBttn на самом деле не определен, потому что не было «кнопка» на всех (только «» метки).

Код:

(function() { 
var triggerBttn = document.getElementById('trigger-overlay'); 
var overlay = document.querySelector('div.overlay'); 
var closeBttn = document.querySelector('#smp_menu'); 
    transEndEventNames = { 
     'WebkitTransition': 'webkitTransitionEnd', 
     'MozTransition': 'transitionend', 
     'OTransition': 'oTransitionEnd', 
     'msTransition': 'MSTransitionEnd', 
     'transition': 'transitionend' 
    }, 
    transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ], 
    support = { transitions : Modernizr.csstransitions }; 

function toggleOverlay() { 
    if(classie.has(overlay, 'open')) { 
     classie.remove(overlay, 'open'); 
     classie.add(overlay, 'close'); 
     var onEndTransitionFn = function(ev) { 
      if(support.transitions) { 
       if(ev.propertyName !== 'visibility') return; 
       this.removeEventListener(transEndEventName, onEndTransitionFn); 
      } 
      classie.remove(overlay, 'close'); 
     }; 
     if(support.transitions) { 
      overlay.addEventListener(transEndEventName, onEndTransitionFn); 
     } 
     else { 
      onEndTransitionFn(); 
     } 
    } 
    else if(!classie.has(overlay, 'close')) { 
     classie.add(overlay, 'open'); 
    } 
} 

triggerBttn.addEventListener('click', toggleOverlay); 
closeBttn.addEventListener('click', toggleOverlay); 
})(); 

Это будет определять "closeBttn" (которым не был использован) в качестве всей области наложения.

Таким образом, это необходимо на script.js изменить класс кнопки, когда он не щелкнул прямо ниже текущего кода:

var otherthingy = document.querySelector('#smp_menu'); 
otherthingy.addEventListener('click', function(){ 
    button.classList.toggle('open'); 
});