Несколько кнопок "закрыть" на модальном

Question

Я использую найденные функции here on Codrops.

У этих модалов есть одна кнопка закрытия (также закрывается, когда вы нажимаете вне модального), но я хочу добавить еще. JavaScript ниже:

var ModalEffects = (function() { 

    function init() { 

     var overlay = document.querySelector('.md-overlay'); 

     [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el, i) { 

      var modal = document.querySelector('#' + el.getAttribute('data-modal')), 
       close = modal.querySelector('.md-close'); 

      function removeModal(hasPerspective) { 
       classie.remove(modal, 'md-show'); 

       if(hasPerspective) { 
        classie.remove(document.documentElement, 'md-perspective'); 
       } 
      } 

      function removeModalHandler() { 
       removeModal(classie.has(el, 'md-setperspective')); 
      } 

      el.addEventListener('click', function(ev) { 
       classie.add(modal, 'md-show'); 
       overlay.removeEventListener('click', removeModalHandler); 
       overlay.addEventListener('click', removeModalHandler); 

       if(classie.has(el, 'md-setperspective')) { 
        setTimeout(function() { 
         classie.add(document.documentElement, 'md-perspective'); 
        }, 25); 
       } 
      }); 

      close.addEventListener('click', function(ev) { 
       ev.stopPropagation(); 
       removeModalHandler(); 
      }); 

     }); 

    } 

    init(); 

})(); 

Я думал, только просто замена:

close = modal.querySelector('.md-close'); 

С этим:

close = modal.querySelectorAll('.md-close'); 

будет делать трюк - и каждый элемент с MD- закрыть класс закроет модальный. Я был не прав (я новичок в JavaScript, если вы не могли сказать).

Заранее благодарим за помощь!

обновленный код:

var ModalEffects = (function() { 

    function init() { 

     var overlay = document.querySelector('.md-overlay'); 

     [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el, i) { 

      var modal = document.querySelector('#' + el.getAttribute('data-modal')); 

      function removeModal(hasPerspective) { 
       classie.remove(modal, 'md-show'); 

       if(hasPerspective) { 
        classie.remove(document.documentElement, 'md-perspective'); 
       } 
      } 

      function removeModalHandler() { 
       removeModal(classie.has(el, 'md-setperspective')); 
      } 

      el.addEventListener('click', function(ev) { 
       classie.add(modal, 'md-show'); 
       overlay.removeEventListener('click', removeModalHandler); 
       overlay.addEventListener('click', removeModalHandler); 

       if(classie.has(el, 'md-setperspective')) { 
        setTimeout(function() { 
         classie.add(document.documentElement, 'md-perspective'); 
        }, 25); 
       } 
      }); 

      modal.addEventListener('click', function(ev) { 
       if (classie.has(ev.target, "md-close")) { 
        ev.stopPropagation(); 
        removeModalHandler(); 
       } 
      }); 


     }); 

    } 

    init(); 

})(); 

Answer 1

Проблема, вероятно, что addEventListener работает только на одном элементе в то время, и close представляет собой совокупность элементов. Вы, вероятно, лучше добавлять прослушиватель событий к самому модальному и проверкам для md-close класса:

modal.addEventListener('click', function (ev) { 
    if (classie.has(ev.target, "md-close")) { 
     ev.stopPropagation(); 
     removeModalHandler(); 
    } 
}); 

Тогда вы можете угробить вашу close = ... переменным, а также.

Answer 2

Изменить

  close.addEventListener('click', function(ev) { 
      ev.stopPropagation(); 
      removeModalHandler(); 
     }); 

В

  document.addEventListener('click', function(ev) { 
      if (classie.has(ev.target, "md-close")) { 
       ev.stopPropagation(); 
       removeModalHandler(); 
      } 
     }); 

И это будет работает!

ТЕПЕРЬ ... Я думал, что применение этого взлома решает также мою проблему, поскольку я хотел добавить .md-close на мою ссылку .md-trigger, чтобы закрыть модальную и открыть новую, но это не сработало! Кто-то может помочь мне в этом?

How to display a new modal window hiding the previous one?

Спасибо!