下面的彈出框組件使用的是類來封裝的。一個彈窗組件通過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(); };以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
