标签：puts opacity length anim tor city xtend wrap 出现
使用说明：
元素上添加属性：
data-role="popNew" data-relation="要弹出的元素class"
html部分：
<div class="wrap">
<h4 class="h4-txt" data-role="popNew" data-relation="tp-mess">我是点击出现弹框</h4>
<h4 class="h4-txt" data-role="popNew" data-relation="tooltip">我是点击出现tip</h4>
<h4 class="h4-txt" data-role="popNew" data-relation="inputs">我是点击出现表单</h4>
<!--弹框 -->
<section class="tp-mess-box tp-mess fn-hide tanchang-colse" data-autoclose="autoClose" data-autotime="200">
<div class="mess-box-content">
<div class="mess-box-center-text">
提示文字居中显示/提示文字居中显示
</div>
<div class="mess-box-bottom-btn">
<a href="javascript:void(0)" class="mess-box-btn ">确定</a>
</div>
</div>
</section>
<!--tips -->
<div class="tp-tooltips tooltip fn-hide ">
<div class="tip-content">默认内容</div>
<span class="tip-left tip-arrow"></span>
<i class="usedfont used-guanbi tanchang-colse"></i>
</div>
<div class="inputs fn-hide" dataclose="">
<div class="tp-form-input tp-form-input-margin ">
<span class="name-tt">输入标题</span>
<div class="input-box"> </div>
<div class="error tanchang-colse">报错信息，我在这里加上tanchang-colse的class,来控制关闭</div>
</div>
</div>js部分
/** * pop.js 插件 */
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 = ‘<div class="cover cover-tanchuang"></div>‘;
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(‘<div class="cover cover-pop"></div>‘);
});
}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 = $ ;
});标签：puts opacity length anim tor city xtend wrap 出现
原文地址：https://www.cnblogs.com/restart77/p/12336951.html
