Multiple "close" buttons on modal

Question

I am using the modals found here on Codrops.

These modals have one close button (also closes when you click outside the modal), but I want to add more. The JavaScript is below:

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

})();

I thought by just simply swapping:

close = modal.querySelector( '.md-close' );

With this:

close = modal.querySelectorAll( '.md-close' );

would do the trick -- and every element with the md-close class would close the modal. I was wrong (I'm new to JavaScript if you couldn't tell).

Thanks in advance for any help with this!

Updated Code:

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

})();

Answer 1

The problem is likely that addEventListener only works on a single element at a time and close is a collection of elements. You're probably better off adding an event listener to the modal itself and checking for the md-close class:

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

Then you can ditch your close = ... variable as well.

Answer 2

Change

            close.addEventListener( 'click', function( ev ) {
            ev.stopPropagation();
            removeModalHandler();
        });

Into

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

And it will works!

NOW... I thought applying this hack solved also my problem as I wanted to add .md-close on my .md-trigger link to close a modal and open a new one but it didn't work! Someone could help me on this?

How to display a new modal window hiding the previous one?

Thanks!