jquery는 중앙 팝업 레이어 code_jquery를 구현합니다.-JS 튜토리얼-php.cn

코드 복사 코드는 다음과 같습니다.

 
/* 
팝업 창 위치를 브라우저 중앙
 1. show(options{ 
height: height 
width: width 
speed: fade-out time, 기본값 0 
container: html 콘텐츠가 포함된 jquery 객체 
model: 모달 창인지 여부, 기본값은 true입니다. 모달 대화 상자는 팝업 레이어 아래의 마스크 레이어를 덮습니다. 이전 기사 오버레이 구현을 참조하세요 
}) 
2. : 페이드아웃 시간은 기본적으로 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, 
높이: 200, 
불투명도: 0.5, 
모델: true, 
속도: 0 
}, 옵션 || 
self._container = self ._options.container; 
var css = { 
 '너비': self._options.width, 
'높이': self._options.height, 
'z-index': Q.Overlay .zindex, 
'위치': '절대', 
'왼쪽': self._getLeft(), 
'top': self._getTop(), 
'display': '없음' 
}; 
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를 통해 제어됩니다. 이 드라마에서 패널을 사용하는 방법 

코드 복사 코드는 다음과 같습니다

/*弹출자정义隐藏框

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