自定义Popup 弹出层

CSS

    <style>
        .popup{
            position: absolute;
            left: 0px;
            right: 0px;
            bottom: 0px;
            overflow: hidden;
            height: 100%;
        }
        .popup .list{
            position: absolute;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: 900;
            background: #fff;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
        }
        .popup .list ul li{
            padding: 10px;
        }
        .popup .list ul li:active{
            background: #F9F9FB;
        }
        .popup .list .cancel{
            text-align: center;
            background: #FE7000;
            color: #fff;
            margin: 10px;
            padding: 10px;
            border-radius: 10px;
        }
        .default{
            background: rgba(20, 20, 20, 0.8);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: none;
            z-index: 100;
        }
    </style>

HTML

    <div class="popup" id="popup">
        <div class="list">
            <div style="padding:10px 0px;text-align: center;">订单取消</div>
            <ul>
                <li>我不想买了</li>
                <li>信息填写错误，重新拍</li>
                <li>同城见面交易</li>
                <li>其他原因</li>
            </ul>
            <div class="cancel">暂不取消</div>
        </div>
        <div class="default"></div>
    </div>

JS

        // 获取盒子的高度，盒子的高度=内容的高度；内容定位到最下面隐藏 buttom:-盒子高度
        // 触发 动画弹出盒子，bottom: 0px
        // 选中 获取内容，盒子动画隐藏
        // 取消 盒子动画隐藏

        function Popup(id){
            var _this = this;
            this.id = id;
            var container = document.getElementById(id);
            this.list = container.children[0];
            this.listHeight = container.children[0].offsetHeight + "px";
            container.style.height = this.listHeight;
            this.list.style.bottom = "-"+this.listHeight;
            this.listName = `#${id} .list`;
            this.default = `#${id} .default`;
            this.list.addEventListener("click",function(event){
                var e = event.target;
                if(e.innerText != '暂不取消'){
                    console.log(e.innerText,_this.goodsId)
                }
                _this.abrogate()
            })
        }
        // 触发
        Popup.prototype.trigger = function(){
            $(this.listName).animate({
                "bottom": "0px"
            },500)
            $(this.default).fadeIn()
        }
        // 关闭
        Popup.prototype.abrogate = function(){
            $(this.listName).animate({
                "bottom": -$(this.listName).height()
            },500)
            $(this.default).fadeOut()
        }
        
        var popup = new Popup("popup")
        var popup2 = new Popup("popup2")
        // 触发
        $(".btn1").click(function(){
            popup.trigger()
        })
        $(".btn2").click(function(){
            popup2.trigger()
        })