Question

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

具有.5不透明度和类＆＃34; md-overlay＆＃34;的叠加层显示在模态框下面和其他内容的顶部（我使用z-index对它们进行分层）

在模态框内，我有一个关闭按钮，类＆＃34; md-close＆＃34;当用户点击时，模态框和重叠停止显示在屏幕上。

我想要实现的目标：

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

单击100％宽度和高度的叠加层时，不应再显示模态框和叠加层。

我尝试了什么：

我尝试在html的叠加层中添加相同类的按钮，然后尝试添加 JS上函数的叠加类（＆＃39; md-close，md-overlay＆＃39;）。

我目前的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' );
            }
        }

我是否必须为叠加层设置新功能，因为它不是一个按钮。

覆盖与关闭按钮相同的功能。

0 个答案: