js用类封装pop弹窗组件

下面的弹出框组件使用的是类来封装的。一个弹窗组件通过new一个实例来生成。

创新互联是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的10年时间我们累计服务了上千家以及全国政企客户，如成都湿喷机等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞誉。

下面直接上代码：

html结构：




  
  
  




  
  
    
    温馨提示
    
      登录后才能参与活动哦！
      

      自动登录跳转中......

pop.js代码：

//Pop的构造函数
  var Pop=function(wrap,option){
    var $this=this;
    var opt={
      closeCall:null
    };
    $.extend(opt,option);
    var mask=wrap.find(".mask");
    //特权方法：1、open()；2、close()；3、setPrize（）；4、setContent（）控制弹窗内显示的内容
    this.open=function(){
      wrap.show();
      mask.show();
    };
    this.close=function(callbalck){
      wrap.hide();
      mask.hide();
      opt.closeCall&&callbalck();
    };
    this.setPrize=function(text){
      wrap.find(".js-prize").text(text);
    };
    this.setContent = function (text) {
      wrap.find(".js-content").text(text);
    };
    function events(){
      wrap.on("click",".close",function(e){
        e.stopPropagation();
        $this.close(opt.closeCall);
      });
    }
    events();
  };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

本文名称：js用类封装pop弹窗组件
路径分享：http://scyanting.com/article/jpdpso.html

js用类封装pop弹窗组件

其他资讯