1 
(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/

上記のプラグインの外でこのclose_modal（）関数を呼び出すにはどうすればよいですか？ajax呼び出しの成功コールバックからポップアップダイアログを閉じたい。ajax呼び出しは外部js関数内にあります。

4

2 に答える 2

3

ベンダーから提供されたソースを変更することを気にしない限り (最初の質問に記載されているように)、次の変更が機能するはずです (これは完全にはテストされていませんが、ほとんどの場合はうまくいくはずです)。 :

(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-02T16:47:59.820 に答える
0

このモジュール構成のポイントは、一部の変数 (関数を含む) を公開しないようにすることです。

したがって、返されたオブジェクトで参照されていないものにはアクセスできません。

この構造については、こちらをお読みください。

あなたの場合、プラグインを変更して返されたオブジェクトの関数を移動したくない場合、最も簡単なのはおそらく行うことです

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

modal_id はhref要素の属性です。

于 2012-10-02T16:17:13.640 に答える