点击页面出对应弹窗

使用说明:

  元素上添加属性:

    data-role="popNew" data-relation="要弹出的元素class"

html部分:

 

    

data-role="popNew" data-relation="tp-mess">我是点击出现弹框

data-role="popNew" data-relation="tooltip">我是点击出现tip

data-role="popNew" data-relation="inputs">我是点击出现表单

提示文字居中显示/提示文字居中显示
默认内容
输入标题
报错信息,我在这里加上tanchang-colse的class,来控制关闭

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 = '
'; 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 = $ ; });

你可能感兴趣的:(点击页面出对应弹窗)