js用類封裝pop彈窗組件

來源：懂視網責編：小采時間：2020-11-27 22:28:28

js用類封裝pop彈窗組件

js用類封裝pop彈窗組件:下面的彈出框組件使用的是類來封裝的。一個彈窗組件通過new一個實例來生成。下面直接上代碼： html結構： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title>&

推薦度：

點擊下載本文 文檔為doc格式

導讀js用類封裝pop彈窗組件:下面的彈出框組件使用的是類來封裝的。一個彈窗組件通過new一個實例來生成。下面直接上代碼： html結構： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title>&

下面的彈出框組件使用的是類來封裝的。一個彈窗組件通過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();
 };

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js用類封裝pop彈窗組件

推薦度：

點擊下載本文 文檔為doc格式

標簽： pop js 彈窗

熱門焦點

js用類封裝pop彈窗組件

js用類封裝pop彈窗組件

js用類封裝pop彈窗組件

最新推薦

猜你喜歡

熱門推薦