在 ClickOutside 上关闭模态弹出窗口

Question

我有一个 jquery 模态弹出窗口。当用户在弹出窗口外单击时如何执行 popup.close()（在 jquery 中初始化为 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;
    
    });
});

这是按钮的样子：

目前正在尝试

popup.on('clickoutside', function(){ popup.close() });

但是当我添加该语句时 jquery 没有加载。

Answer 1

RTFM! You have an option:

closeOverlay: true

这是做什么的：

Whether to let the user to close the dialog by clicking the wrapping overlay. Default value is 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
    });

在 ClickOutside 上关闭模态弹出窗口

Close Modal Popup on ClickOutside

javascript

jquery

popup

目前正在尝试