jquery实现居中弹出层代码

　　/*

　　弹出窗口定位到浏览器中间

　　1. show(options{

　　height:高度

　　width:宽度

　　speed:渐显时间 默认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,

　　height: 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();

　　}

　　});

　　};

　　};

　　/*弹出自定义隐藏框

　　<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: 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 = { height: 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, height: 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, height: 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, height: container.height(), width: container.width() });

　　};