jquery implements centered pop-up layer code_jquery

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({ 컨테이너: 컨테이너, 높이: 컨테이너.높이(), 너비: 컨테이너.너비() });
};

Statement：

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

Previous article：Example analysis of float operation precision in javascript_javascript skillsNext article：Example analysis of float operation precision in javascript_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills