/**
* 弹窗插件 by sunhaochen
* create time 2017-10-31 17:01:27
* **********实例的方法***********
* show 方法显示窗口
* showModal 方法显示带黑色透明背景遮罩的窗口
* reset 方法重置窗口位置
* width height 方法设置窗口宽度:弹窗实例.width('5px')
* addEventListener removeEventListener 方法添加、删除事件:弹窗实例.addEventListener(type,callback);type可用值为show remove beforeremove reset hide;
* remove 方法移除窗口,删除html
* hide 方法隐藏窗口,不删除html
* **********实例的方法***********
*
* **********实例的可用属性***********
* prev 当前实例前一弹窗的实例,没有则为null
* next 当前实例后一弹窗实例,没有则为null
* **********实例的可用属性***********
*
* **********初始化实例的参数***********
* fixed 参数窗口是否固定显示
* title 参数窗口标题
* content 参数窗口主体内容
* opacity 参数窗口黑色遮罩背景透明度
* quickClose 参数当通过showModal方法打开窗口时是否点击窗口主体以外时remove移除弹窗
* skin 参数添加窗口class属性,定义更多的样式
* event 参数添加回调函数,可用值为show remove beforeremove reset hide。例:event:{show:function(){},remove:function(){};}
* **********初始化实例的参数***********
*
* **********类属性***********
* lastDialog 参数保存的是最后一次实例化的对象,如果对象被remove,值就为null
* **********类属性***********
*
* 使用
* $.Dialog(object)
*/
$.Dialog = function( args ){
return new $.Dialog.prototype.init(args||{});
}
$.Dialog.init_zindex = 1024;
$.Dialog.prototype = {
constructor : $.Dialog,
init : function(args){
this.options = $.extend({
fixed : false,
title : '',
content : '',
opacity : '.5',
skin: ''
},args);
this.event = {
show: [],
remove: [],
beforeremove: [],
reset: [],
beforehide: [],
hide: []
}
for (var key in this.options.event) {
this.event[key] = this.event[key].concat(this.options.event[key]);
}
this.prev = this.next = null;
},
_posixy: function(){
var options = this.options;
var $e = this.node;
var w_w = $(w).width();
var w_h = $(w).height();
var e_w = $e.outerWidth();
var e_h = $e.outerHeight();
var xy = $e.offset(top);
var left = w_w / 2 - e_w / 2;
// 不固定对话框
var reltop = $(document).scrollTop() + w_h - w_h / 2 - e_h / 2;
// 固定对话框
var fixtop = w_h / 2 - e_h / 2;
var top = options.fixed ? fixtop >= 0 ? fixtop : 0 : reltop >= $(document).scrollTop() ? reltop : 0;
return {
left : left,
top : top
}
},
_execEvent: function(type){
for ( var i = 0; i < this.event[type].length; i++ ){
this.event[type][i].call(this);
}
},
show: function(){
var that = this;
var options = that.options;
var content = '<div class="popWindow '+ options.skin +'" style="z-index:'+ (++$.Dialog.init_zindex) +';position:'+ (options.fixed ? 'fixed' : 'absolute' ) +';">' +
'<table width="100%">' +
'<tr><td class="ui-header"><div class="ui-dialog-title">'+ options.title +'</div><i class="ui-dialog-close" i="close">×</i></td></tr>' +
'<tr><td><div class="ui-body">'+ options.content +'</div></td></tr>' +
'</table>' +
'</div>';
that.node = $(content).appendTo('body');
that.node.css(that._posixy())
.on('click','[i="close"]',function(){
that.remove();
})
// 改变浏览器视口大小重置对话框位置
$(w).on('resize',function(){that.reset();})
if ( options.quickClose && that.background ){
that.background.on('click',function(){
that.remove();
})
}
if ( $.Dialog.lastDialog ){
$.Dialog.lastDialog.next = that;
that.prev = $.Dialog.lastDialog;
}
$.Dialog.lastDialog = that;
this._execEvent('show');
return that;
},
showModal: function(){
var options = this.options;
var background = '<div class="popWindowBg" style="z-index:'+ (++$.Dialog.init_zindex) +';position:fixed;left:0;top:0;height:100%;width:100%;background-color:rgba(0, 0, 0, '+ options.opacity +');"></div>';
this.background = $(background).appendTo('body');
this.show();
return this;
},
reset: function(){
this.node.css(this._posixy());
this._execEvent('reset');
return this;
},
width: function(n){
n = +n.toString().replace('px','');
if ( n > 0 ){
this.node.width(n);
this.reset();
} else {
console.error('width 方法需要正数参数如:"1px"或1');
}
return this;
},
height: function(n){
n = +n.toString().replace('px','');
if ( n > 0 ){
this.node.height(n);
this.reset();
} else {
console.error('height 方法需要正数参数如:"1px"或1');
}
return this;
},
addEventListener: function(type,callback){
if ( !~$.inArray(type,['show','remove','beforeremove','reset']) ) {
console.error('参数1有效值必须为show remove beforeremove reset');
} else if ( !(typeof callback == 'function') ) {
console.error('参数2有效值必须为函数');
} else {
this.event[type].push(callback);
}
return this;
},
removeEventListener: function(type,callback){
if ( !~$.inArray(type,['show','remove','beforeremove','reset']) ) {
console.error('参数1有效值必须为show remove beforeremove reset');
} else if ( !(typeof callback == 'function') ) {
console.error('参数2有效值必须为函数');
} else {
for ( var i = 0; this.event[type][i]; i++ ){
if ( this.event[type][i] === callback ){
delete this.event[type][i];
}
}
}
return this;
},
remove: function(){
this._execEvent('beforeremove');
this.node.remove();
if ( this.background ){
this.background.remove();
}
this._execEvent('remove');
if ( this.prev ){
this.prev.next = this.next;
}
if ( this.next ){
this.next.prev = this.prev;
}
if ( $.Dialog.lastDialog === this ) {
$.Dialog.lastDialog = this.prev
}
},
hide: function(){
this._execEvent('beforehide');
this.node.hide();
if ( this.background ){
this.background.hide();
}
this._execEvent('hide');
this.show = function(){
this.node.show();
this.background.show();
this._execEvent('show');
}
}
}
$.Dialog.prototype.init.prototype = $.Dialog.prototype;