html 弹出层剧中,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();

}

});

};

};

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

/*弹出自定义隐藏框

close

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 = '

' +

'

' +

'

提示

' +

'

' + msg + '

' +

'

'

'

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 = '

' +

'

' +

'

关闭提示

' +

'

' + msg + '

' +

'

确 定

' +

'

'

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 = '

' +

'

' +

'

关闭' + title + '

' +

'

' + msg + '

' +

'

确 定 取 消

' +

'

'

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() });

};