jquery实现居中弹层

时间：2010-08-24 来源：xhan

代码
/*
弹出窗口定位到浏览器中间
1. show(options{
默认0
container:包含的html内容的jquery对象
model:是否是模态窗口，默认true，模态对话框就是在弹层下面在覆盖遮罩层，参考上篇文章Overlay实现
})

2. close(speed:淡出时间默认0)
*/
Q.Panel = function() {
    var self = this;

    self._resetPosition = function() {
        self._container.css("top", self._getTop());
        self._container.css("left", self._getLeft());
    };
    self._getTop = function() {
        return Q.bom.scrollY() + (Q.bom.windowHeight() - self._options.height) / 2;
    };
    self._getLeft = function() {
        return (Q.dom.pageWidth() - self._options.width) / 2;
    };
    self.show = function(options) {

        self._options = $.extend({
            width: 350,
            200,
            opacity: 0.5,
            model: true,
            speed: 0
        }, options || {});

        self._container = self._options.container;

        var css = {
            'width': self._options.width,
            'height': self._options.height,
            'z-index': Q.Overlay.zindex,
            'position': 'absolute',
            'left': self._getLeft(),
            'top': self._getTop(),
            'display': 'none'
        };

        self._container.css(css);
        if (self._options.model) {
            self._overlay = new Q.Overlay(self._options.opacity);
            self._overlay.show();
        }

        $(window).scroll(self._resetPosition);
        $(window).resize(self._resetPosition);
        $(document.body).append(self._container);
        self._container.fadeIn(self._options.speed);
        Q.Overlay.zindex++; //没弹出一次就递增，防止多个弹层重叠
    };
    self.close = function(speed) {
        $(window).unbind('resize', self._resetPosition);
        $(window).unbind('scroll', self._resetPosition);

        self._container.fadeOut(speed || 0, function() {
            self._container.remove();
            if (self._options.model) {
                self._overlay.close();
            }
        });

    };
};

这里居中是通过js控制的,下面是几个用这个剧中Panel实现的通用对话框

代码 /*弹出自定义隐藏框
    <div id="league" style="display:none">
    <button class="close" >close</button>
    </div>

   Q.showPanel("league", function(panel, container) {
                    container.find(".close").click(function() {
                        panel.close();
                    }
                );
*/
Q.showPanel = function(containerId, registerEventCallback) {
    var container = $("#" + containerId);
    var height = container.height();
    var width = container.width();
    container = container.clone(true);
    var options = { height, width: width, container: container };
    var panel = new Q.Panel();
    registerEventCallback(panel, container);
    panel.show(options);
};
/*弹出窗口，从url加载窗体html片段*/
Q.openWindow = function(url, data, registerEventCallback) {
    $.get(url, data, function(html) {
        var panelDiv = $(html);
        panelDiv.hide();
        $(document.body).append(panelDiv);

        var options = { panelDiv.height(), width: panelDiv.width(), container: panelDiv };
        var panel = new Q.Panel();
        registerEventCallback(panel, panelDiv);
        panel.show(options);

    });
}

/*提示框，3秒后自动淡出*/
Q.tips = function(msg) {
    var html = '<div class="gu_layer w330">' +
    '<div class="gu_layer_main">' +
        '<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif">提示</h2>' +
        '<p class="gu_layer_txt">' + msg + '</p>' +
        '<div class="gu_layer_btn"></div>' +
    '</div></div>'
    var container = $(html);
    container.hide();
    $(document.body).append(container);

    var panel = new Q.Panel();
    panel.show({ container: container, container.height(), width: container.width() ,speed:500});

    setTimeout(function() { panel.close(500); }, 3000);
};
/*提示框*/
Q.alert = function(msg) {
    var html = '<div class="gu_layer w330">' +
    '<div class="gu_layer_main">' +
        '<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a>提示</h2>' +
        '<p class="gu_layer_txt">' + msg + '</p>' +
        '<div class="gu_layer_btn"><a class="btn_org" href="">确定</a></div>' +
    '</div></div>'
    var container = $(html);
    container.hide();
    $(document.body).append(container);

    var panel = new Q.Panel();

    container.find(".btn_tit_close").click(function() {
        panel.close();
        return false;
    });
    container.find(".btn_org").click(function() {
        panel.close();
        return false;
    });
    panel.show({ container: container, container.height(), width: container.width() });
};
/*确认框 cancel回调为可选*/
Q.confirm = function(title, msg, yes, cancel) {

    var html = '<div class="gu_layer w330">' +
    '<div class="gu_layer_main">' +
        '<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a>' + title + '</h2>' +
        '<p class="gu_layer_txt">' + msg + '</p>' +
        '<div class="gu_layer_btn"><a class="btn_org" href="">确定</a><a class="btn_gray" href="">取消</a></div>' +
    '</div></div>'
    var container = $(html);
    container.hide();
    $(document.body).append(container);

    var panel = new Q.Panel();

    container.find(".btn_tit_close").click(function() {
        panel.close();
        return false;
    });
    container.find(".btn_gray").click(function() {
        if (cancel)
            cancel();
        panel.close();
        return false;
    });
    container.find(".btn_org").click(function() {
        if (yes)
            yes();
        panel.close();
        return false;
    });
    panel.show({ container: container, container.height(), width: container.width() });
};