0

我有一个模态框，显示何时单击我的应用程序中的特定元素。

具有 0.5 不透明度和“md-overlay”类的叠加显示在模态框下方和其余内容的顶部（我使用 z-index 将它们分层）

在模态框内，我有一个带有“md-close”类的关闭按钮，当用户单击该按钮时，模态框和覆盖停止在屏幕上显示。

我想要达到的目标：

我想将模式框中按钮的相同功能添加到叠加层。

当单击具有 100% 宽度和高度的覆盖时，模式框和覆盖不应再显示。

我试过的：

我尝试将相同的按钮类添加到 html 上的叠加层，并尝试将叠加层的类添加到 JS 上的函数（'md-close，md-overlay'）。

我现在的 JS： 

    myModal.on('click', '.md-close', function (e) {
        var item = $(this),
            content = item.find('.md-video');

        item.removeClass('md-show');
        $videoDiv.appendTo('body');
        player.stopWaitForChanges();
        content.empty();
    });

    [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

        var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
            close = modal.querySelector( '.md-close' ),
            video = $(modal).find('.md-video');

        function removeModal( hasPerspective ) {
            classie.remove( modal, 'md-show' );

            if( hasPerspective ) {
                classie.remove( document.documentElement, 'md-perspective' );
            }
        }

我是否应该只为叠加层提供一个新功能，因为它不是按钮。

4

0 回答 0