새 모달 창을 숨겨서 이전 창을 숨기는 방법?

Question

tympanus.net (위대한 애니메이션 사용) 모달을 사용하면 배경 항목 div (<div class="md-overlay"></div>)를 삭제하여 내 모달 뒤에있는 메뉴 항목과 상호 작용할 수 있지만 새로운 모 드를 열 때 한 모달 만 표시하는 방법을 모르겠습니다. 그곳에있는 이전의 새와 새것이 그 위에 나타납니다.

모든 것이 호출 된 모달에 적용되는 클래스 .md-show에서 제어됩니다. 내가해야 할 일은 같은 클래스로 새로운 것을 열기 전에 모두 .md-show 클래스를 삭제하는 것입니다. 아마 대본으로?

업데이트 : 다음 스크립트입니다. Copyright 2013, Codrops // 죄송합니다. 댓글을 달 수 없습니다! 그들은 작동하지 않습니다!

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(); 

})(); 

는 내가 새로운 모달를 열기 전에, 여기 .md-show을 제거 할 필요가 있다고 생각 :

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); 
      } 
     }); 

내가 어떤 성공을하지 않고 몇 가지 시도를했다 그래서 어떤 도움을 주셔서 감사합니다! :) tympanus referring article

Answer 1

mousedown 및 mouseup 이벤트를 사용하여 재미있는 솔루션을 찾았습니다!

mousedown는 와 mouseUp는 MD-쇼

쉬운을 추가 모든 MD-쇼 클래스를 삭제하지만 도달하는 사일 걸렸다 그 스크립트에 대한 지식없이!

전체 권리 코드!

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('mouseup', 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); 
      } 
     }); 

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

    }); 

} 

init(); 

})();

md-close 클래스를 md-trigger 링크에 추가해야합니다.