모달 윈도우 문제

Question

this를 내 포트폴리오에 사용하려고합니다.

왜 모르겠지만 모달 창 하나만 열 수 있습니다. 다른 모달 창은 모두 열리지 않습니다. 나는 here의 날짜를 내 포트폴리오의 회사 항목이 작동하지만 다른 모든 것들은 열리지 않는다는 것을 알 수 있듯이 넣었습니다.

코드의 경우 여기에 내 modalEffects.js 파일이 있습니다. } 935 :close = modal.querySelector ('.md-close');) Chrome 디버거에서 오류가 있음을 알립니다. Uncaught TypeError : null의 querySelector 메서드를 호출 할 수 없습니다. 왜 그리고 어떻게 수정해야하는지. 두 가지 문제가 연결될 수 있는지 나는 모른다. 이 모달 윈도우의 내용에 대해 페이지 하단에

<!-- WORKS PAGE --> 
<a id="portfolio"></a> 
<div class="worksPage padding-top-bottom-60"> 
    <div class="row"> 
    <div class="columns twelve"> 
     <h1>Portfolio</h1> 
     <div id="container" class="fourColPortfolio super-list variable-sizes clearfix"> 
     <!-- portfolio Items -->   
     <div class="element small corner-stamp imprime logos design code"> 
      <div id="folioList" class="folioList isotopeCornerStampList"> 
      <ul id="filter" class="option-set clearfix" data-option-key="filter"> 
       <li><a href="#show-all" data-option-value="*" class="selected">TOUT</a></li> 
       <li><a href="#features" data-option-value=".imprime">IMPRIMÉ</a></li> 
       <li><a href="#features" data-option-value=".logos">LOGOS</a></li> 
       <li><a href="#features" data-option-value=".design">WEB DESIGN</a></li> 
       <li><a href="#features" data-option-value=".code">INTÉGRATION/PROG. </a></li> 
      </ul> 
      </div> 
     </div> 
     <div class="element small logos"> 
      <div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-1"><span><i class="icon-plus-sign"></i></span></a></div> 
      <img src="images/portfolio-1.jpg" alt="Portfolio Image" /> 
     </div> 

     <div class="element small branding"> 
      <div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-2"><span><i class="icon-plus-sign"></i></span></a> 
      </div>   
      <img src="images/portfolio-2.jpg" alt="Portfolio Image" /> 
     </div> 

     <div class="element small logos"> 
      <div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-3"><span><i class="icon-plus-sign"></i></span></a> 
      </div>   
      <img src="images/portfolio-3.jpg" alt="Portfolio Image" /> 
     </div> 

     <div class="element small design code logos"> 
      <div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-4"><span><i class="icon-plus-sign"></i></span></a></div> 
      <img src="images/portfolio-4.jpg" alt="Portfolio Image" /> 
     </div> 

     <div class="element small logos"> 
      <div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-5"><span><i class="icon-plus-sign"></i></span></a></div> 
      <img src="images/portfolio-5.jpg" alt="Portfolio Image" /> 
     </div> 

     <div class="element small logos"> 
      <div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-6"><span><i class="icon-plus-sign"></i></span></a></div> 
      <img src="images/portfolio-6.jpg" alt="Portfolio Image" /> 
     </div> 

     <div class="element small imprime"> 
      <div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-7"><span><i class="icon-plus-sign"></i></span></a></div> 
      <img src="images/portfolio-7.jpg" alt="Portfolio Image" /> 
     </div> 

     <div class="element small feature"> 
      <div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-8"><span><i class="icon-plus-sign"></i></span></a></div> 
      <img src="images/portfolio-8.jpg" alt="Portfolio Image" /> 
     </div> 

     <div class="element small design logos"> 
      <div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-9"><span><i class="icon-plus-sign"></i></span></a></div> 
      <img src="images/portfolio-9.jpg" alt="Portfolio Image" /> 
     </div>   
     <!-- /Portfolio Items --> 
     </div> 
    </div> 

    </div> 
</div> 
<!-- /WORKS PAGE --> 

그리고 :

<div class="md-modal md-effect-7" id="detail-1"> 
     <div class="md-content"> 
     <div class="row"> 
      <div class="columns twelve"> 
      <h3>Détails du projet : Muse Par Simone</h3> 
      <div> 
       <ul> 
       <li><strong>Date de réalisation:</strong> Octobre 2013</li> 
       <li><strong>Mandat:</strong> 
        <ul> 
        <li>Création d’un logo pour une nouvelle ligne de bijoux haut de gamme au style punk-rock. La direction donnée par la cliente : Épuré, haute couture, chic, urbain, monochrome, le tout en accord avec le style des bijoux.</li> 
        <li>Réalisation d’une bannière et d’une icône pour page Facebook.</li> 
        <li>Rédaction d’un document qui analyse les différents profils de la cliente sur les réseaux sociaux afin de produire des recommendations sur leurs utilisations.</li> 
        </ul> 
       </li> 
       </ul> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="columns six"> 
      <img src="images/detailMUSE1.jpg"> 
      </div> 
      <div class="columns six"> 
      <img src="images/detailMUSE2.jpg"> 
      </div> 
      <div class="columns six"> 
      <img src="images/detailMUSE3.jpg"> 
      </div> 
     </div> 
     <button class="md-close">Fermer les détails du projet</button> 
     </div> 
    </div> 
    </div> 

    <div class="md-modal md-effect-7" id="detail-5"> 
     <div class="md-content"> 
     <div class="row"> 
      <div class="columns twelve"> 
      <h3>Détails du projet : Les Maisons Bouillon</h3> 
      <div> 
       <ul> 
       <li><strong>Date de réalisation:</strong> Février 2014</li> 
       <li><strong>Mandat:</strong> 
        <ul> 
        <li>Création d’un logo pour une nouvelle ligne de bijoux haut de gamme au style punk-rock. La direction donnée par la cliente : Épuré, haute couture, chic, urbain, monochrome, le tout en accord avec le style des bijoux.</li> 
        <li>Réalisation d’une bannière et d’une icône pour page Facebook.</li> 
        <li>Rédaction d’un document qui analyse les différents profils de la cliente sur les réseaux sociaux afin de produire des recommendations sur leurs utilisations.</li> 
        </ul> 
       </li> 
       </ul> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="columns six"> 
      <img src="images/detailBOUILLON1.jpg"> 
      </div> 
      <div class="columns six"> 
      <img src="images/detailBOUILLON2.jpg"> 
      </div> 
      <div class="columns six"> 
      <img src="images/detailBOUILLON3.jpg"> 
      </div> 
     </div> 
     <button class="md-close">Fermer les détails du projet</button> 
     </div> 
    </div> 
    </div> 



<div class="md-overlay"></div> 

인가 내 인덱스 HTML 파일에서

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

})(); 

내 포트폴리오이 있습니다 내가 볼 수없는 것을 보는 사람이 있습니까? 난 이미 오 anwser tymphanus 웹 사이트와도 사람들이 개 질문을보고 시도했지만 작동하지 않았다 : Multiple "close" buttons on modal How to display a new modal window hiding the previous one?

감사합니다! 더 많은 정보가 필요하시면 알려주세요! :)

Answer 1

글쎄, 오류에 대해 언급. .md-trigger 요소를 열거하고 'data-modal'속성을 사용하여 DOM 노드를 가져옵니다. 문제는 ForEach() 루프의 두 번째 반복에서 id가 'modal-7'인 요소를 찾고 페이지에 아무 것도 없으므로 변수 모달이 valor null을 가져옵니다. 그런 다음 modal.querySelector()에 대한 호출이 실패합니다. 이것이 귀하의 페이지에 단 하나의 모달이있는 이유입니다. 그 후에 init() 함수는 실행을 중지합니다.