如何显示一个隐藏前一个窗口的新模式窗口? [英] How to display a new modal window hiding the previous one?

问题描述

使用 tympanus.net 模态(与greats animations)很容易删除背景div(<div class="md-overlay"></div>)，使我可以与模态后面的菜单项进行交互，但是我不知道如何一次只显示一个模态，就像我打开一个仍旧存在的模态时一样.新的出现在上面.

Using tympanus.net modals (with greats animations) is easy to delete the backdrop div (<div class="md-overlay"></div>)letting me interact with menu items behind my modal but I don't know how to display just one modal at time as when I open a new one the previous still there and the new appear over it.

所有内容均由类.md-show控制，该类适用于被调用的模态. 我认为我需要做的是在使用同一类打开新的.md-show类之前，先删除所有应用的类.也许有脚本?

Everything is controlled from a class .md-show which is applied to the called modal. I think what I need to do is delete all .md-show class applied before opening a new one with this same class. Maybe with a script?

更新: 这是脚本:版权所有2013，Codrops///对不起，我无法发表评论！他们行不通！

UPDATE: This is the script: Copyright 2013, Codrops //sorry, I can't place comments! They doesn't works!

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:

I Think I need to remove .md-show here, before opening the new 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 );
            }
        });

我进行了一些尝试但均未成功，因此将不胜感激！ :) 鼓室指代文章

I made some tries without any success so some help will be appreciate! :) tympanus referring article

推荐答案

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

Found a funny solution using mousedown and mouseup events!

mousedown将删除所有md-show类 mouseup将添加md-show

mousedown will delete all md-show classes mouseup will add md-show

很容易，但是我花了4天的时间却没有任何脚本知识！

Easy but it took me 4 days to reach that without any knowledge on scripts!

完整的验证码！

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-trigger链接中添加md-close类！

Please note that you need to add md-close class to md-trigger links!

这篇关于如何显示一个隐藏前一个窗口的新模式窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！