使用说明:
元素上添加属性:
data-role="popNew" data-relation="要弹出的元素class"
html部分:
js部分 /** * pop.js 插件 */
data-role="popNew" data-relation="tp-mess">我是点击出现弹框
data-role="popNew" data-relation="tooltip">我是点击出现tip
data-role="popNew" data-relation="inputs">我是点击出现表单
define(function(require,exports,module){
var PopNew = function(ele,config){
this.pop = $.extend({
effect: 'fadeIn',//出现效果,
delayTime: 500,//效果延时时间,默认.5s
autoClose: false,//自动关闭
autoTime: 2000, //自动关闭时间默认2s 通过autotime属性来取值,判断是多少秒关闭
shifting:'top', //弹出位置
successCallback: function(){},//确定回调
errorCallback: function(){},//取消回调
maskOpcity: 0.6, //对话框遮罩层透明度
$body : $("body"),
$mask : $(".cover-pop"),
$relation : "",
$colse:$(".tanchang-colse")
},config);
this.init(ele);
}
PopNew.prototype = {
constructor:PopNew,
init:function(ele){
this.pop.successCallback();
this.pop.errorCallback();
this.$ele = ele;
this.$mask = '';
this.$effect = this.$ele.data('effect') || this.pop.effect;
this.$delayTime = this.$ele.data('delayTime') || this.pop.delayTime;
this.$autoClose = this.$ele.data('autoClose') || this.pop.autoClose;
this.$maskOpcity = this.$ele.data('maskOpcity') || this.pop.maskOpcity;
this.$shifting = this.$ele.data('shifting') || this.pop.shifting;
this.$relation = this.$ele.data('relation');
this.openPop();
this.closePop();
},
openPop : function () {
var _this = this;
_this.$ele.on("click",function(e){
e.stopPropagation();
e.preventDefault();
_this.pop.$relation = _this.$ele.data("relation");
if (_this.pop.$mask.length <= 0) {
$("." + _this.$relation).animate({
opacity: 1
}, 200, "ease-in-out", function(){
$("." + _this.$relation).removeClass("fn-hide");
$("body").append('');
});
}else{
$("." + _this.$relation).removeClass("fn-hide");
$(".cover").removeClass("fn-hide").css("opacity","0.6");
}
});
},
closePop : function(){
var _this = this;
_this.pop.$colse.on("click",function(e){
e.stopPropagation();
e.preventDefault();
$("." + _this.$relation).addClass("fn-hide");
$(".cover").addClass("fn-hide").css("opacity","0");
});
}
}
$.extend($.fn,{
popNew:function(config){
return new PopNew($(this), config || {});
}
});
// $('[data-role = "popNew"]').each(function(){
// $(this).popNew({
// successCallback:function(){
// alert(111);
// }
// });
// });
$('[data-role = "popNew"]').each(function(){
$(this).popNew();
});
// module.exports = $ ;
});