点击页面出对应弹窗

使用说明：

　　元素上添加属性：

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