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