模態上的多個「關閉」按鈕

這些模態有一個關閉按鈕（當您在模態外單擊時也會關閉），但我想添加更多。 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

模態上的多個「關閉」按鈕

回答

相關問題