下面是寫的簡單的Jquery彈窗元件 暫不支援animate,只能滿足一般的彈窗顯示隱藏需求，更多功能後續會完善！網上及jquery元件很多這樣的彈窗，但是用別人的感覺心裡過不去，所以就隨便寫寫，當做練習下！程式碼如下：
/**
* fileoverview WindowAlert
* @desc jQuery彈窗元件
* @param {clickElem} 點選元素
* @param {container} 彈窗視窗最外層容器
* 預設配置引數如下：{
eventType: 'click', // 預設為點選
closed: '.closed', //關閉按鈕
bgColor: '#000', //預設顏色
opacity: '0.5', // 預設透明度
position: {
x: 0, //預設情況下居中
y: 0
},
isScroll: true, //預設情況下 視窗隨著滾動而滾動
isResize: true // 預設情況下 隨著視窗縮放而縮放
}
* @callback 回撥函式
*/
var WindowAlert = (function(){
function WindowAlert(clickElem,container,config,callback){
var self = this,
isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
self.isIE6 = isIE6;
if(!(self instanceof WindowAlert)){
return new WindowAlert(clickElem,container,config,callback);
}
// 匹配傳引數clickElem
if($.isPlainObject(clickElem)){
self.clickElem = clickElem;
}else if(/^\./.test(clickElem)){
self.clickElem = $(clickElem);
}else if(/^#/.test(clickElem)){
self.clickElem = $(clickElem);
}else if($('.'+clickElem)){
self.clickElem = $('.'+clickElem);
}else {
throw new Error('傳遞引數不符合!');
}
// 匹配傳引數container
if($.isPlainObject(container)){
self.container = container;
}else if(/^\./.test(container)){
self.container = $(container);
}else if(/^#/.test(container)){
self.container = $(container);
}else if($('.'+container)){
self.container = $('.'+container);
}else {
throw new Error('傳遞引數不符合!');
}
config = $.extend(WindowAlert.Config,config || {});
self.config = config || {};
self._init();
// 顯示後 回撥
callback && callback();
// 點選關閉按鈕
$(self.config.closed).bind('click',function(){
self.hide();
$('.kissy-mask').hide();
if(true === isIE6) {
$('body').css({'filter':'','opacity':'','background-color':'',
'position':'','top':'','left':'','z-index':''});
}
});
// 視窗縮放
$(window).bind('resize',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(!$(self.container).hasClass('hidden') && self.config.isResize){
self._showDialog(self.container);
}
},200);
});
// 視窗滾動
$(window).bind('scroll',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(!$(self.container).hasClass('hidden') && self.config.isScroll){
self._showDialog(self.container);
}
},200);
});
}
// 預設配置引數
WindowAlert.Config = {
eventType: 'click', // 預設為點選
closed: '.closed', //關閉按鈕
bgColor: '#000', //預設顏色
opacity: '0.5', // 預設透明度
position: {
x: 0, //預設情況下居中
y: 0
},
isScroll: true, //預設情況下 視窗隨著滾動而滾動
isResize: true // 預設情況下 隨著視窗縮放而縮放
};
WindowAlert.prototype = {
_init: function(){
var self = this;
$(self.clickElem).each(function(index,item){
$(item).bind(self.config.eventType,function(){
if(!self.flag){
var div = $('<div class="kissy-mask"></div>');
$('body').prepend(div);
flag = true;
}
if(false === self.isIE6) {
$('.kissy-mask').css({'opacity':self.config.opacity,'background-color':self.config.bgColor,
'position':'fixed','top':0,'left':0,'width':'100%','height':'100%','z-index':1});
}else {
/**$('body').css({'opacity':self.config.opacity,'background-color':self.config.bgColor,
'position':'absolute','top':0,'left':0,'z-index':1}); **/
/* IE6不支援fixed 所以對IE6做特殊的處理下 就空白背景*/
$('body').css({'position':'absolute','top':0,'left':0,'z-index':1});
}
self.show();
self._showDialog(self.container);
});
})
},
flag: false,
_showDialog: function(container){
var self = this;
$(container).css({'position':'absolute','z-index':99999});
var offsetTop = Math.floor(($(window).height() - $(self.container).height())/2) + $(document).scrollTop(),
offsetLeft = Math.floor(($(window).width() - $(self.container).width())/2) + $(document).scrollLeft();
// 判斷x,y位置預設是不是等於0 如是的話 居中 否則 根據傳進來的位置重新定位
if(0 === self.config.position.x && 0 === self.config.position.y){
$(container).offset({'top':offsetTop, 'left':offsetLeft});
}else{
$(container).offset({'top':self.config.position.y,'left':self.config.position.x});
}
},
hide: function(){
var self = this;
if(!$(self.container).hasClass('hidden')){
$(self.container).addClass('hidden');
}
},
show: function(){
var self = this;
if($(self.container).hasClass('hidden')){
$(self.container).removeClass('hidden');
}
},
// 銷燬
destory: function(){
var self = this;
$(self.clickElem).each(function(index,item){
$(item).unbind(self.config.eventType);
});
self.clickElem = [];
self.container = [];
}
};
return WindowAlert;
})();
呼叫方式如下 ：
new WindowAlert(要點選的元素，彈窗的外層容器，{}，function(){
$('.windowAlert').append('<div class="closed">XXX</div>');
});