Javascript 如何显示隐藏前一个模式窗口的新模式窗口？

使用modals（带有很棒的动画）很容易删除背景div（

），让我可以与模态后面的菜单项进行交互，但我不知道如何一次只显示一个模态，就像打开一个新的模态时一样，上一个模态仍然存在，新的出现在它上面

所有内容都由一个类

.md show

控制，该类应用于被调用的模态。 我想我需要做的是删除所有应用的

.md show

类，然后再使用同一类打开一个新类。也许有剧本

更新： 这是剧本：版权所有2013，Codrops//对不起，我不能发表评论！它们不起作用

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

})();

在打开新模式之前，我想我需要在此处删除

.md show

：

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

---

我做了一些尝试，但没有成功，因此我们将感谢您的帮助！：）

使用mousedown和mouseup事件找到了一个有趣的解决方案

mousedown将删除所有md show类 鼠标将添加md显示

很简单，但我花了4天的时间在没有任何脚本知识的情况下实现了这一点

完全正确的代码

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

})（）

---

请注意，您需要将md close类添加到md触发器链接

使用这个版本的模态，它很容易！