自定义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);