jQuery插件：如何從外部

(function ($) { 
    $.fn.extend({ 
     leanModal : function (options) { 
      var defaults = { 
       top : 100, 
       overlay : 0.5, 
       closeButton : null 
      }; 
      var overlay = $("<div id='lean_overlay'></div>"); 
      $("body").append(overlay); 
      options = $.extend(defaults, options); 
      return this.each(function() { 
       var o = options; 
       $(this).click(function (e) { 
        var modal_id = $(this).attr("href"); 
        //$("#lean_overlay").click(function() { 
        // close_modal(modal_id) 
        //}); 
        $(o.closeButton).click(function() { 
         close_modal(modal_id) 
        }); 
        var modal_height = $(modal_id).outerHeight(); 
        var modal_width = $(modal_id).outerWidth(); 
        $("#lean_overlay").css({ 
         "display" : "block", 
         opacity : 0 
        }); 
        $("#lean_overlay").fadeTo(200, o.overlay); 
        $(modal_id).css({ 
         "display" : "block", 
         "position" : "fixed", 
         "opacity" : 0, 
         "z-index" : 11000, 
         "left" : 50 + "%", 
         "margin-left" : - (modal_width/2) + "px", 
         "top" : o.top + "px" 
        }); 
        $(modal_id).fadeTo(200, 1); 
        e.preventDefault() 
       }) 
      }); 
      function close_modal(modal_id) { 
       $("#lean_overlay").fadeOut(200); 
       $(modal_id).css({ 
        "display" : "none" 
       }) 
      } 
     } 
    }) 
})(jQuery);

這是從leanModal插件調用內部功能 - http://leanmodal.finelysliced.com.au/jQuery插件：如何從外部

我應該如何調用該close_modal（）函數上述插件之外？我想從ajax調用的成功回調中關閉彈出對話框。 ajax調用在一個外部js函數中。

來源

2012-10-02 sanandrl

這個模塊構建體的一點是要避免發佈一些變量（包括函數）。

所以你不能訪問究竟是不是在返回的對象引用。

閱讀關於此構造的this。

在你的情況，如果你不想改變插件移動功能在返回的對象，最簡單的可能是做

$("#lean_overlay").fadeOut(200); 
$(modal_id).css({ 
    "display" : "none" 
})

其中modal_id是你的元素的href屬性。

來源

2012-10-02 16:17:13

感謝鏈接 – sanandrl

只要你不介意改變由供應商提供（如您最初的問題給出）來源如下更改應該工作（請注意，這還沒有經過充分測試，但它應該讓你最那裏的樣子）：

(function ($) { 
$.fn.extend({ 
    leanModal: function (method) { 
     var methods = { 
      init: function (options) { 
       return this.each(function() { 
        var o = options; 
        $(this).click(function (e) { 
         var modal_id = $(this).attr("href"); 
         //$("#lean_overlay").click(function() { 
         // close_modal(modal_id) 
         //}); 
         $(o.closeButton).click(function() { 
          close_modal(modal_id) 
         }); 
         var modal_height = $(modal_id).outerHeight(); 
         var modal_width = $(modal_id).outerWidth(); 
         $("#lean_overlay").css({ 
          "display": "block", 
          opacity: 0 
         }); 
         $("#lean_overlay").fadeTo(200, o.overlay); 
         $(modal_id).css({ 
          "display": "block", 
          "position": "fixed", 
          "opacity": 0, 
          "z-index": 11000, 
          "left": 50 + "%", 
          "margin-left": -(modal_width/2) + "px", 
          "top": o.top + "px" 
         }); 
         $(modal_id).fadeTo(200, 1); 
         e.preventDefault() 
        }) 
       }); 
      }, 
      close: function (modal_id) { 
       close_modal(modal_id); 
      } 
     }; 

     if (methods[method]) { 
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || !method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.leanModal'); 
     } 

     var defaults = { 
      top: 100, 
      overlay: 0.5, 
      closeButton: null 
     };    
     var overlay = $("<div id='lean_overlay'></div>"); 
     $("body").append(overlay); 
     options = $.extend(defaults, options); 

     function close_modal(modal_id) { 
      $("#lean_overlay").fadeOut(200); 
       $(modal_id).css({ 
        "display": "none" 
       }) 
      } 
     } 
    }) 
})(jQuery);

然後，你就可以打電話給你這樣的代碼：

 $('#foo').leanModal(); //Initialise 

... 

    $('#foo').leanModal('close'); //Close

來源

2012-10-02 16:47:59 jedimindtrickster

jQuery插件：如何從外部

回答

相關問題