资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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://cdkjz.cn/article/jpdpso.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220