jQuery插件之模仿QQ邮箱的聊天功能的弹出弹出效果

$.fn.extend({

    SetBigInSmallOut: function(ContextDiv, T, W, H, closeControlID) {

        return this.each(function(i) {

            $(this).bind("click", function(event) {

                var btnOffset = $(event.target).offset();

                if ($("#" + ContextDiv).css("display") == "none") {

                    $("#" + ContextDiv).css({ 'top': btnOffset.top, 'left': btnOffset.left, 'width': '0', 'height': '0' }).animate(

                                {

                                    height: H,

                                    width: W,

                                    left: (document.documentElement.clientWidth - W) / 2,

                                    top: T

                                }, "slow", function() {

                                    this.style.display = "";

                                    $(this).attr({ "hideTop": btnOffset.top, "hideLeft": btnOffset.left });

                                    $("#" + closeControlID).css({ "cursor": "pointer" }).unbind();

                                    $("#" + closeControlID).click(function(event) {

                                        //alert($("#div_").attr("hideLeft"));

                                        $("#" + ContextDiv).animate(

                                    {

                                        height: 0,

                                        width: 0,

                                        left: $("#" + ContextDiv).attr("hideLeft"),

                                        top: $("#" + ContextDiv).attr("hideTop")

                                    }, "slow", function() {

                                        this.style.display = "none";

                                    });

                                    });

                                }

                        );

                }

            });

        });

    }

});

//$("input").SetBigInSmallOut("div_", 300, 300, 200, "close"); 主div，距离顶部多少px，主div高度，主div宽度，关闭主div的按钮id