点击页面出对应弹窗

使用说明：

　　元素上添加属性：

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