模态上的多个“关闭”按钮答案

【问题标题】：Multiple "close" buttons on modal模态上的多个“关闭”按钮
【发布时间】：2013-12-14 19:22:57
【问题描述】：

我正在使用 here on Codrops 找到的模态。

这些模态框有一个关闭按钮（当您在模态框外单击时也会关闭），但我想添加更多。 JavaScript 如下：

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

})();

我认为只是简单地交换：

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

有了这个：

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

可以解决问题 - 每个具有 md-close 类的元素都会关闭模式。我错了（如果你看不出来，我是 JavaScript 新手）。

在此先感谢您的帮助！

更新代码：

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

})();

【问题讨论】：

标签： javascript selectors-api

【解决方案1】：

问题很可能是addEventListener 一次只能处理一个元素，而close 是元素的集合。您最好向模态本身添加一个事件侦听器并检查 md-close 类：

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

那么你也可以放弃你的 close = ... 变量。

【讨论】：

嘿布拉德，非常感谢您对此进行了破解，但仍然没有任何运气（或者我可能添加了错误的代码）。这就是我所拥有的...如果您发现任何可能导致它无法工作的东西，请告诉我。我欠你！ 更新了上面的代码。

【解决方案2】：

改变

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

进入

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

它会起作用的！

现在...我认为应用此 hack 也解决了我的问题，因为我想在我的 .md-trigger 链接上添加 .md-close 以关闭模式并打开一个新模式，但它不起作用！有人可以帮我解决这个问题吗？

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

谢谢！

【讨论】：