Heim  >  Artikel  >  Web-Frontend  >  jquery实现居中弹出层代码_jquery

jquery实现居中弹出层代码_jquery

WBOY
WBOYOriginal
2016-05-16 18:20:491075Durchsuche
复制代码 代码如下:

/*
弹出窗口定位到浏览器中间
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实现的通用对话框
复制代码 代码如下:

/*弹出自定义隐藏框

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() });
};
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn