jquery implements centered pop-up layer code

Copy code The code is as follows:

 
/* 
Position the pop-up window to the middle of the browser
 1. show(options{ 
height: height 
width: width 
speed: fade-out time, default 0 
container: jquery object containing html content 
model: whether it is a modal window , the default is true, the modal dialog box covers the mask layer under the pop-up layer, refer to the previous article Overlay implementation 
}) 
2. close(speed: fade-out time defaults to 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; //Increments before popping up once to prevent multiple elastic layers from overlapping
}; 
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(); 
} 
}) ; 
}; 
}; 

The centering here is controlled through js. Here are several common dialog boxes implemented using the Panel in this drama

Copy code The code is as follows:

/*弹출자정义隐藏框

Q.showPanel("리그", function(패널, 컨테이너) {
container.find(".close").click(function() {
panel.close();
}
);
*/
Q.showPanel = function(containerId,registerEventCallback) {
var 컨테이너 = $("#" 컨테이너Id)
var height = 컨테이너.높이();
var width = Container.width();
container = Container.clone(true);
var options = { 높이: 높이, 너비: 너비, 컨테이너: 컨테이너 }; new Q.Panel();
registerEventCallback(패널, 컨테이너);
panel.show(options)
}; 🎜>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(),
var panel = new Q.Panel();
registerEventCallback(panel, panelDiv);
panel.show(options)
}
/*提示框,3秒后自动淡*/
Q.tips = function(msg) {
var html = '

'
'

' >'

提示

' >'

' msg '

'
'

'
var 컨테이너 = $(html);
container.hide();
$(document.body).append(컨테이너);
var 패널 = new Q.Panel();
panel.show({ 컨테이너: 컨테이너, 높이: 컨테이너.높이(), 너비: 컨테이너.폭() ,속도:500});
setTimeout(function() { panel.close(500); }, 3000);
};
/*提示框*/
Q.alert = function(msg) {
var html = '

'
'

关闭提示

'
'

' msg '

'
'

确 determin

'
'

'
var 컨테이너 = $(html);
container.hide();
$(document.body).append(컨테이너);
var 패널 = 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({ 컨테이너: 컨테이너, 높이: 컨테이너.높이(), 너비: 컨테이너.너비() });
};
/*确认框 cancel回调为可选*/
Q.confirm = function(title, msg, yes, cancel) {
var html = '

'
'

关闭' 제목 '

'
'

' msg '

'
'

确 정의 取消

'
'

'
var 컨테이너 = $(html);
container.hide();
$(document.body).append(컨테이너);
var 패널 = new Q.Panel();
container.find(".btn_tit_close").click(function() {
panel.close();
return false;
});
container.find(".btn_gray").click(function() {
if (취소)
cancel();
panel.close();
return false;
});
container.find(".btn_org").click(function() {
if (예)
yes();
panel.close();
return false;
});
panel.show({ 컨테이너: 컨테이너, 높이: 컨테이너.높이(), 너비: 컨테이너.너비() });
};

Related labels：

Pop-up layer

source：php.cn

Previous article：Example analysis of float operation precision in javascript_javascript skills Next article：Firebug Getting Started Guide (Firefox Browser)_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

jquery implements centered pop-up layer code_jquery

提示

关闭提示

关闭' 제목 '