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.