自定义 Jquery 灯箱插件

Question

这是我第一个尝试使用here 提供的示例创建的插件。

现在在示例中有一个链接，我们可以通过单击它来关闭灯箱。 但我想知道如何在点击背景时关闭它（即网页上的任何地方）

这是我尝试过的，但没有成功。

 $('.paulund_block_page').click(function(){
          $(pop_up).fadeOut().remove();
 });

谁能告诉我哪里出错了？

编辑：这是完整的插件：

    (function($){

    // Defining our jQuery plugin

    $.fn.paulund_modal_box = function(prop){

        // Default parameters

        var options = $.extend({
            height : "250",
            width : "500",
            title:"JQuery Modal Box Demo",
            description: "Example of how to create a modal box.",
            top: "20%",
            left: "30%",
        },prop);

        return this.click(function(e){
            add_block_page();
            add_popup_box();
            add_styles();

            $('.paulund_modal_box').fadeIn();
        });

         function add_styles(){
            $('.paulund_modal_box').css({
                'position':'absolute',
                'left':options.left,
                'top':options.top,
                'display':'none',
                'height': options.height + 'px',
                'width': options.width + 'px',
                'border':'1px solid #fff',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#f2f2f2',
                'z-index':'50',
            });
            $('.paulund_modal_close').css({
                'position':'relative',
                'top':'-25px',
                'left':'20px',
                'float':'right',
                'display':'block',
                'height':'50px',
                'width':'50px',
                'background': 'url(images/close.png) no-repeat',
            });
                        /*Block page overlay*/
            var pageHeight = $(document).height();
            var pageWidth = $(window).width();

            $('.paulund_block_page').css({
                'position':'absolute',
                'top':'0',
                'left':'0',
                'background-color':'rgba(0,0,0,0.6)',
                'height':pageHeight,
                'width':pageWidth,
                'z-index':'10'
            });
            $('.paulund_inner_modal_box').css({
                'background-color':'#fff',
                'height':(options.height - 50) + 'px',
                'width':(options.width - 50) + 'px',
                'padding':'10px',
                'margin':'15px',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px'
            });
        }

         function add_block_page(){
            var block_page = $('<div class="paulund_block_page"></div>');

            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
             $(pop_up).appendTo('.paulund_block_page');

             $('.paulund_modal_close').click(function(){
                $(this).parent().fadeOut().remove();
                $('.paulund_block_page').fadeOut().remove();
             });
        }

        return this;
     };
 $('.paulund_block_page').click(function(){
       $(pop_up).fadeOut(function(){$(this).remove();});
       $('.paulund_block_page').fadeOut(function(){$(this).remove();});
});
})(jQuery);

Answer 1

那个插件中有一个错字，使它无法为我工作。

其中一行说

'height':pageheight

什么时候该说

'height':pageHeight

（将 h 大写）

如果您随后将代码插入到 add_popup_box 函数的底部，它就可以正常工作。然而，淡出并没有完成（它只是消失了）。另外，您忘记了单击背景时删除阻止页面的代码。

试试这个：

$('.paulund_block_page').click(function(){
    $(pop_up).fadeOut(function(){$(this).remove();});
    $('.paulund_block_page').fadeOut(function(){$(this).remove();});
});

这将等到淡入淡出动画完成后才会移除模态框和阻塞页面。

更新：您将代码添加到错误的位置。插件应该是这样的：

(function($){

    // Defining our jQuery plugin

    $.fn.paulund_modal_box = function(prop){

        // Default parameters

        var options = $.extend({
            height : "250",
            width : "500",
            title:"JQuery Modal Box Demo",
            description: "Example of how to create a modal box.",
            top: "20%",
            left: "30%",
        },prop);

        return this.click(function(e){
            add_block_page();
            add_popup_box();
            add_styles();

            $('.paulund_modal_box').fadeIn();
        });

         function add_styles(){
            $('.paulund_modal_box').css({
                'position':'absolute',
                'left':options.left,
                'top':options.top,
                'display':'none',
                'height': options.height + 'px',
                'width': options.width + 'px',
                'border':'1px solid #fff',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#f2f2f2',
                'z-index':'50',
            });
            $('.paulund_modal_close').css({
                'position':'relative',
                'top':'-25px',
                'left':'20px',
                'float':'right',
                'display':'block',
                'height':'50px',
                'width':'50px',
                'background': 'url(images/close.png) no-repeat',
            });
                        /*Block page overlay*/
            var pageHeight = $(document).height();
            var pageWidth = $(window).width();

            $('.paulund_block_page').css({
                'position':'absolute',
                'top':'0',
                'left':'0',
                'background-color':'rgba(0,0,0,0.6)',
                'height':pageHeight,
                'width':pageWidth,
                'z-index':'10'
            });
            $('.paulund_inner_modal_box').css({
                'background-color':'#fff',
                'height':(options.height - 50) + 'px',
                'width':(options.width - 50) + 'px',
                'padding':'10px',
                'margin':'15px',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px'
            });
        }

         function add_block_page(){
            var block_page = $('<div class="paulund_block_page"></div>');

            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
             $(pop_up).appendTo('.paulund_block_page');

             $('.paulund_modal_close').click(function(){
                $(this).parent().fadeOut(function(){$(this).remove();});
                $('.paulund_block_page').fadeOut(function(){$(this).remove();});
             });

             $('.paulund_block_page').click(function(){
                 $(pop_up).fadeOut(function(){$(this).remove();});
                 $('.paulund_block_page').fadeOut(function(){$(this).remove();});
             });
        }

        return this;
     };
})(jQuery);