用类封装一个pop弹窗组件
下面的弹出框组件使用的是类来封装的。一个弹窗组件通过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(); };
