js用类封装pop弹窗组件实例分享

来源：保捱科技网

下面的弹出框组件使用的是类来封装的。一个弹窗组件通过new一个实例来生成。本文主要为大家详细介绍了js用类封装pop弹窗组件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

下面直接上代码：

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>
<p class="js-pop js-prize-pop hide" id="popLogin">
 <p class="mask"></p>
 <p class="content">
 <p class="close"></p>
 <p class="prize-title">温馨提示</p>
 <p class="prize-content" style="margin-top: 1rem">
 登录后才能参与活动哦！
 <br/>
 自动登录跳转中......
 </p>
 </p>
</p>
<!--引入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/0;
 $("html").css("fontSize",100*ratio+"px");
 $(window).on("resize",function(){
 var windowW = $(window).width();
 var ratio = windowW/0;
 $("html").css("fontSize",100*ratio+"px");
 });
//new一个Pop实例
 var popLogin=new Pop($("#popLogin"));
 $("#bb").on("click",function(){
 popLogin.open();
 });

</script>
</body>
</html>

pop.js代码：

显示全文

全部频道

js用类封装pop弹窗组件实例分享