模态上的多个“关闭”按钮

这些模态有一个关闭按钮（当您在模态外单击时也会关闭），但我想添加更多。 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(); 

})();

来源

2013-12-14 tory

的问题很可能是addEventListener只能在单个元件上的时间和close是元素的集合。你可能会更好过添加事件监听器模式本身并检查了md-close类：

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

然后你就可以抛弃你close = ...变量为好。

来源

2013-12-15 20:05:41

嘿布拉德，非常感谢您对此采取了一些措施，但仍然没有任何运气（或者我错误地添加了您的代码）。这是我得到的...如果你看到任何可能导致它无法工作的事情，请让我知道。我欠你！ **上面更新的代码。** – tory

变化

  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?

谢谢！

来源

2014-02-25 16:07:19 mungle

在我的问题上找到解决方案!!!!!!!看看我的答案链接上面！ – mungle

模态上的多个“关闭”按钮

回答

相关问题