javascript - modal - popup al abrir pagina jquery

¿Cómo mostrar una nueva ventana modal que oculta la anterior?

Question

Utilizar tympanus.net modals (con grandes animaciones) es fácil de eliminar el fondo div ( <div class="md-overlay"></div> ) permitiéndome interactuar con elementos del menú detrás de mi modal, pero no sé cómo mostrar solo un modal al tiempo como cuando abro uno nuevo, el anterior sigue allí y el nuevo aparece sobre él.

Todo se controla desde una clase .md-show que se aplica al modal llamado. Creo que lo que tengo que hacer es eliminar todas las .md-show aplicadas antes de abrir una nueva con esta misma clase. Tal vez con un guion?

ACTUALIZACIÓN: Esta es la secuencia de comandos: Copyright 2013, Codrops // lo siento, no puedo hacer comentarios! Ellos no funcionan!

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

})();

Creo que necesito eliminar .md-show aquí, antes de abrir el nuevo modal:

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

¡Hice algunos intentos sin éxito, así que se apreciará algo de ayuda! :) tympanus refiriendo artículo

Answer 1

¡Encontré una solución divertida usando mousedown y mouseup events!

mousedown eliminará todas las clases de md-show mouseup agregará md-show

¡Fácil pero tardé 4 días en llegar a eso sin ningún conocimiento de los guiones!

¡CÓDIGO DE DERECHO COMPLETO!

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

}) ();

Tenga en cuenta que debe agregar la clase md-close a los enlaces md-trigger.