在ClickOutside上关闭模态弹出窗口

Question

我有一个jquery模式弹出窗口。当用户点击弹出窗口外部（在jquery中初始化为ModuleToProcess = 'MyLoader.psm1' FunctionsToExport = '*-*' AliasesToExport = '*' ）时，如何执行popup.close()

var popup

这就是按钮的样子：

目前正在尝试

$(document).ready(function(){     
    // Find element with class popup, register an on click event
    $('#new-alert').click(function(){

        var popup = new $.flavr({                                
            /* Add an onBuild hook and create the button here */
            onBuild     : function( $cont ){

                var popup = this;                    
                var outer = $cont.find('.flavr-outer');                    

                /* clicking x successfully closes */
                close = $('<img src="/vendor/flavr/images/close.png" />');
                close.css({ position: 'absolute', top: '4px', right: '4px', cursor: 'pointer' });
                close.on('click', function(){ popup.close() });
                outer.css('position', 'relative').append(close);

                popup.on('clickoutside', function(){ popup.close() });
            },
            content     : 'Test x Close Button',
            buttons     : false
        });

        // Add a return false to prevent anchor directing the browser
        return false;

    });
});

但是当我添加该语句时，jquery不会加载。

Answer 1

RTFM！你有一个option：

closeOverlay: true

这是做什么的：

  

是否让用户通过单击包装叠加来关闭对话框。默认值为false。

您的代码应为：

    var popup = new $.flavr({                                

        /////////////////////////////////////////////////////////////
        // Adding this will successfully close on clicking wrapper //
        closeOverlay: true,                                        //
        /////////////////////////////////////////////////////////////

        /* Add an onBuild hook and create the button here */
        onBuild     : function( $cont ){

            var popup = this;                    
            var outer = $cont.find('.flavr-outer');                    



            /* clicking x successfully closes */
            close = $('<img src="/vendor/flavr/images/close.png" />');
            close.css({ position: 'absolute', top: '4px', right: '4px', cursor: 'pointer' });
            close.on('click', function(){ popup.close() });
            outer.css('position', 'relative').append(close);

            popup.on('clickoutside', function(){ popup.close() });
        },
        content     : 'Test x Close Button',
        buttons     : false
    });