用类封装一个pop弹窗组件

Posted 2020-08-25 hawtree

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用类封装一个pop弹窗组件相关的知识，希望对你有一定的参考价值。

下面的弹出框组件使用的是类来封装的。一个弹窗组件通过new一个实例来生成。

下面直接上代码：

<!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();
    };

以上是关于用类封装一个pop弹窗组件的主要内容，如果未能解决你的问题，请参考以下文章

封装Vue组件的一些技巧

全是干货！封装Vue组件的一些技巧

vue + elementui 中的弹窗组件封装成公共组件

OpenHarmony——ets自定义弹窗UI组件封装

vue封装element弹窗组件封装为什么抛不出去点击事件

微信小程序-自己封装一个弹窗组件