弹出可以拖动的框

弹出可以拖动的框，代码如下：

function FloatWindow() {
    var cd = this;
    cd.MIN_HEIGHT = 40;
    cd.MIN_WIDTH = 180;
    cd.elementObj = null;
    this.create = function (opts) {
        var date = new Date();
        var options = {
            id: date.getDate(),
            title: "Float Window",//标题
            region: "body",//附着区域
            x: 100,
            y: 100,
            width: 400,
            height: 200,
            AutoClose: false,//是否允许自动关闭
            timer:5,//多长时间关闭，单位是秒
            zindex: 100,//弹出层
            maskindex: 99,//遮罩层
            args: null,//回调函数的参赛
            url: null,//加载的url
            ismodel: false,//是否是模态窗口
            enableTopWindow: true,//是否允许选中的时候，置于最上面
            enableDrag: true,//是否允许拖动
            movehandler: function () { },//移动的时候执行的函数
            closehandler: function () { },//关闭的时候执行的函数
            minhandler: function () { },//最小化的时候执行的函数
            restorehandler: function () { },//恢复大小的时候执行的函数
            resizehandler: function () { },//修改大小的时候执行的函数。暂时没有实现
            loadcallback: function () { }//加载页面成功以后执行的回调函数
        };
        opts = $.extend({}, options, opts);
        if (opts.x == "center") {
            var w = $(opts.region).width();
            opts.x = (w - opts.width) / 2;
        }
        if (opts.y == "center") {
            var h = $(opts.region).height();
            opts.y = (h - opts.height) / 2;
        }
        cd.opts = opts;
        cd.root = $("<div></div>").addClass("fw_root");
        cd.root.attr("id", cd.opts.id);
        cd.root.css({ "left": cd.opts.x, "top": cd.opts.y, "width": cd.opts.width, "height": cd.opts.height, "z-index": cd.opts.zindex });
        cd.header = $("<div></div>").addClass("fw_header").appendTo(cd.root);
        cd.title = $("<div></div>").addClass("fw_title").text(cd.opts.title).appendTo(cd.header);
        cd.container = $("<div></div>").addClass("fw_container").appendTo(cd.root);
        cd.content = $("<div></div>").addClass("fw_content").appendTo(cd.container);
        cd.operateArea = $("<div></div>").addClass("fw_operate").appendTo(cd.header);
        cd.btnClose = $("<button />").addClass("fw_btn_close").appendTo(cd.operateArea);
        cd.btnMin = $("<button />").addClass("fw_btn_min").appendTo(cd.operateArea);
        cd.btnRestore = $("<button />").addClass("fw_btn_restore").appendTo(cd.operateArea);

        cd.originalWidth = cd.opts.width;
        cd.orginalHeight = cd.opts.height;

        cd.btnMin.click(function () {
            cd.btnMin.hide();
            cd.container.hide();
            cd.btnRestore.show();
            cd.opts.minhandler();
            var hideWidth = cd.title.width() + cd.operateArea.width() + 10;
            hideWidth < cd.MIN_WIDTH ? hideWidth = cd.MIN_WIDTH : hideWidth;
            cd.root.animate({ "width": hideWidth, "height": cd.MIN_HEIGHT }, "slow");
            cd.originalWidth = cd.originalWidth || cd.root.outerWidth(true);
            cd.orginalHeight = cd.orginalHeight || cd.root.outerHeight(true);
        });
        cd.btnRestore.click(function () {
            cd.btnMin.show();
            cd.container.show();
            cd.btnRestore.hide();
            cd.opts.restorehandler();
            cd.root.animate({ "width": cd.originalWidth, "height": cd.orginalHeight }, "slow");
        });
        cd.btnClose.click(function () {
            cd.root.remove();
            cd.opts.closehandler();
        });
        cd.mousemove = function (e) {
            var left, top;
            left = e.clientX - cd.elementObj.x;
            top = e.clientY - cd.elementObj.y;
            cd.root.css({ "left": left, "top": top });
        };
        cd.mouseup = function (e) {
            $(document).unbind("mousemove");
            $(document).unbind("mouseup");
            cd.elementObj = null;
        };
        cd.header.bind("mousedown", function (e) {
            if (cd.opts.enableTopWindow) {
                var zindex = 0;
                var elements = $(".fw_root");
                for (var i = 0; i < elements.length; i++) {
                    var z = parseInt($(elements[i]).css("z-index"));
                    if (zindex < z) {
                        zindex = z;
                    }
                }
                zindex++;
                cd.root.css({ "z-index": zindex });
            }
            if (cd.opts.enableDrag) {
                $(document).unbind("mousemove");
                $(document).unbind("mouseup");
                cd.elementObj = $(this);
                cd.elementObj.x = e.clientX - $(this).offset().left;
                cd.elementObj.y = e.clientY - $(this).offset().top;
                $(document).bind("mousemove", cd.mousemove);
                $(document).bind("mouseup", cd.mouseup);
            }
        });
        cd.rootmask = $("<div></div>");
        cd.rootmask.css({
            left: "0px",
            top: "0px",
            bottom: "0px",
            right: "0px",
            "background-color": "black",
            "position": "absolute",
            "opacity": "0.5",
            "z-index": cd.opts.maskindex
        });
        if (cd.opts.ismodel) {
            $("body").append(cd.rootmask);
        }
        $(cd.opts.region).append(cd.root);
        if (cd.opts.url) {
            cd.content.load(cd.opts.url, function () {
                //cd.opts.loadcallback(cd.opts.args);
                cd.opts.loadcallback.apply(window, cd.opts.args);
            });
        }
        //是否自动关闭，单位是秒
        if (cd.opts.AutoClose) {
            window.setTimeout(cd.close, cd.opts.timer * 1000);
        }
    };
    this.init = function () {
        cd.btnRestore.hide();
    }
    this.close = function () {
        cd.btnClose.click();
    }
}

调用代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="script/jquery-2.1.0.js"></script>
    <script src="script/floatwindow.js"></script>
    <link href="style/floatwindow.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            var fw = new FloatWindow();
            var opts = {
                url: "detail.html",
                loadcallback: function () {
                    CreateWindow(arguments);
                },
                args:["aa","bb","cc"]
            };
            fw.create(opts);
            fw.init();
        });
    </script>
</head>
<body>

</body>
</html>

示例下载：http://download.csdn.net/detail/u011872945/7491901