jquery は中央に配置されたポップアップ レイヤー code_jquery を実装します

コードをコピー コードは次のとおりです:

/*
ポップアップ ウィンドウを次の位置に配置します。ブラウザの中央
1. show(options{
height: 高さ
width: 幅
speed: フェードアウト時間、デフォルト 0
container: HTML コンテンツを含む jquery オブジェクト
model: モーダル ウィンドウかどうか、デフォルトは true、モーダル ダイアログ ボックスはポップアップ レイヤの下のマスク レイヤをカバーします。前の記事を参照してください。オーバーレイの実装
})
2. : フェードアウト時間のデフォルトは 0)
*/
Q.Panel = function() {
var self = this;
self._resetPosition = function() {
self._container .css("トップ", 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、
不透明度: 0.5、
モデル: true、
速度: 0
}、オプション ||
self._container = self ._options.container;
var css = {
'width': self._options.width,
'height': self._options.height,
'z-index': Q.Overlay .zindex、
'position': '絶対'、
'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); 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 によって制御されます。このドラマでパネルを使用する




コードをコピー

コードは次のとおりです:

/*弹出自定义隐藏框

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