Problems with modal windows

Question

I'm trying to use this in my portfolio.

I dont understand why but I can only open one modal window, all the other ones just won't work. I put what I've done to date here as you can see the firm item in my portfolio works but all the other ones won't open.

So for the code, here is my modalEffects.js file. On line 9 : close = modal.querySelector( '.md-close' );) the chrome debugguer tell me there is an error :Uncaught TypeError: Cannot call method 'querySelector' of null ) which I also don't know why and how to correct it. I don't know if the two problems can be linked !

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

})();

In my index html file I have this for my portfolio :

<!-- 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 -->

And this at the bottom of the page for the content of the modal windows :

<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>

Is there anyone who see something I don't ? I already tried looking at the anwser oh the tymphanus website and also those 2 questions but it didn't work : Multiple "close" buttons on modal How to display a new modal window hiding the previous one?

Thank you ! If you need more info just tell me ! :)

Answer 1

Well, about the error you mention. You enumerating the .md-trigger elements, and using their 'data-modal' attribute to get a DOM Node. The problem is that, in the second iteration of the ForEach() loop, you're trying to find an element with the id 'modal-7', and there's none on the page, so the variable modal gets the valor null. Then your call to modal.querySelector() obviously fails. That's why there's just one modal in your page. Your init() function stops executing after that.