• 点击页面出对应弹窗


    使用说明:

      元素上添加属性:

        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 = $ ;
    });
  • 相关阅读:
    二维码物流方面的应用与用户体验方面的改进
    css3文本字体
    css文本样式及控制文本的大小写
    css基础知识之列表
    css基础知识之属性选择器
    css基础内容之background
    webstorm常用快捷键
    canvas标签的使用
    HTML格式化
    a标签链接到当前页内指定位置
  • 原文地址:https://www.cnblogs.com/restart77/p/12336951.html
走看看 - 开发者的网上家园