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弹窗组件

最新推荐

猜你喜欢

热门推荐