jquery는 중앙 팝업 레이어 code_jquery를 구현합니다.

/*
팝업 창 위치를 브라우저 중앙
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를 통해 제어됩니다. 이 드라마에서 패널을 사용하는 방법