代码
/*
弹出窗口定位到浏览器中间
1. show(options{
height:高度
width:宽度
speed:渐显时间 默认0
container:包含的html内容的jquery对象
model:是否是模态窗口,默认true,模态对话框就是在弹层下面在覆盖遮罩层,参考上篇文章Overlay实现
})
2. close(speed:淡出时间 默认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 ++ ; //没弹出一次就递增,防止多个弹层重叠
};
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();
}
});
};
};
/*
弹出窗口定位到浏览器中间
1. show(options{
height:高度
width:宽度
speed:渐显时间 默认0
container:包含的html内容的jquery对象
model:是否是模态窗口,默认true,模态对话框就是在弹层下面在覆盖遮罩层,参考上篇文章Overlay实现
})
2. close(speed:淡出时间 默认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 ++ ; //没弹出一次就递增,防止多个弹层重叠
};
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控制的,下面是几个用这个剧中Panel实现的通用对话框
代码
/*
弹出自定义隐藏框
<div id="league" style="display:none">
<button class="close" >close</button>
</div>
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 = ' <div class="gu_layer w330"> ' +
' <div class="gu_layer_main"> ' +
' <h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif">提示</h2> ' +
' <p class="gu_layer_txt"> ' + msg + ' </p> ' +
' <div class="gu_layer_btn"></div> ' +
' </div></div> '
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 = ' <div class="gu_layer w330"> ' +
' <div class="gu_layer_main"> ' +
' <h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a>提示</h2> ' +
' <p class="gu_layer_txt"> ' + msg + ' </p> ' +
' <div class="gu_layer_btn"><a class="btn_org" href="">确 定</a></div> ' +
' </div></div> '
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 = ' <div class="gu_layer w330"> ' +
' <div class="gu_layer_main"> ' +
' <h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a> ' + title + ' </h2> ' +
' <p class="gu_layer_txt"> ' + msg + ' </p> ' +
' <div class="gu_layer_btn"><a class="btn_org" href="">确 定</a><a class="btn_gray" href="">取 消</a></div> ' +
' </div></div> '
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() });
};
<div id="league" style="display:none">
<button class="close" >close</button>
</div>
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 = ' <div class="gu_layer w330"> ' +
' <div class="gu_layer_main"> ' +
' <h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif">提示</h2> ' +
' <p class="gu_layer_txt"> ' + msg + ' </p> ' +
' <div class="gu_layer_btn"></div> ' +
' </div></div> '
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 = ' <div class="gu_layer w330"> ' +
' <div class="gu_layer_main"> ' +
' <h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a>提示</h2> ' +
' <p class="gu_layer_txt"> ' + msg + ' </p> ' +
' <div class="gu_layer_btn"><a class="btn_org" href="">确 定</a></div> ' +
' </div></div> '
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 = ' <div class="gu_layer w330"> ' +
' <div class="gu_layer_main"> ' +
' <h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a> ' + title + ' </h2> ' +
' <p class="gu_layer_txt"> ' + msg + ' </p> ' +
' <div class="gu_layer_btn"><a class="btn_org" href="">确 定</a><a class="btn_gray" href="">取 消</a></div> ' +
' </div></div> '
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() });
};