js用类封装pop弹窗组件

2019-11-19 15:13:23

字体：大中小

来源：转载

供稿：网友

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

下面直接上代码：

html结构：

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    /*基本的样式*/    button{width: 1.6rem;height: 0.5rem;font-size: 0.3rem;line-height: 0.5rem;background: red;color: white;font-weight: bold}    .hide{display: none;}    .js-pop{      width: 100%;      height: 100%;      z-index: 100;      position: absolute;      top:0;      left: 0;      font-size: 0.24rem;    }    .js-pop .mask{      position: fixed;      top: 0;      left: 0;      width: 100%;      height: 100%;      background: #000;      opacity: 0.2;    }    .js-pop .content{      position: fixed;      top: 50%;      left: 50%;      width: 5.80rem;      height: 4.81rem;      margin: -2.405rem 0 0 -2.9rem;      background: url("pop-bg.png") no-repeat;      background-size: contain;      color: #262626;      text-align: center;    }    .js-pop .content .close{      position: absolute;      top: .25rem;      right: .08rem;      width: .54rem;      height: .48rem;      z-index: 4;      cursor:pointer;    }    .js-pop .content .prize-title {      height: .39rem;      min-width: 1.77rem;      margin: .28rem auto;      line-height: 0.39rem;      color: white;      text-align: left;      text-indent: 1rem;    }    .js-pop .content .prize-content {      color: #a40000;      font-size: .24rem;      margin:0 0.1rem 0 0.49rem;      line-height: 0.4rem;      width: 5.2rem;    }  </style></head><body><button id="bb">显示弹窗</button><div class="js-pop js-prize-pop hide" id="popLogin">  <div class="mask"></div>  <div class="content">    <div class="close"></div>    <div class="prize-title">温馨提示</div>    <div class="prize-content" style="margin-top: 1rem">      登录后才能参与活动哦！      <br/>      自动登录跳转中......    </div>  </div></div><!--引入jquery--><script type="text/javascript" src="http://image.37wan.cn/common/js/jquery-1.9.1.min.js"></script><!--引入Pop组件--><script src="pop.js"></script><script>//  rem代码  var windowW = $(window).width();  var ratio = windowW/640;  $("html").css("fontSize",100*ratio+"px");  $(window).on("resize",function(){    var windowW = $(window).width();    var ratio = windowW/640;    $("html").css("fontSize",100*ratio+"px");  });//new一个Pop实例  var popLogin=new Pop($("#popLogin"));  $("#bb").on("click",function(){    popLogin.open();  });</script></body></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();  };

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

上一篇：jQuery ajax调用webservice注意事项

下一篇：利用js编写网页进度条效果