【javascript】上拉下拉弹窗实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/slidepopup.css">
    <script>
        //->REM
        ~function () {
            var desW = 750,
            winW = document.documentElement.clientWidth || document.body.clientWidth;
            if (winW > desW) {
            return;
            }
            document.documentElement.style.fontSize = winW / desW * 100 + 'px';
        }();
    </script>
</head>
<body>
    <div class="btn">按钮</div>
    <div class="promote_mask">
        <div>
            <div class="clear operate">
                <span class="f_left cancel">取消</span>
                <span class="f_left title">上传图片</span>
                <span class="f_left determine">确定</span>
            </div>
            <div class="picture_area">
                <p class="tips">请上传符合任务要求的图片</p>
                <div class="picture_wrapper">
                  <div class="progress">0%</div>
                  <input id="upload_input_again" type="file" accept="image/*" capture="camera" />
                </div>
                <p>图片大小不超过2M，仅支持jpg、png、jpeg</p>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>

       $(function(){
            //点击按钮
            $(".btn").click(function(){
                $(".promote_mask").show();
                $(".promote_mask>div").slideToggle();
            })

            $(".promote_mask").click(function(e){
                var event = e || window.event;
                var target = event.target || event.srcElement;
                if(target.className == "promote_mask"){
                    $(".promote_mask>div").slideToggle(function(){
                    $(".promote_mask").hide();
                });
                }
            })

            // 取消
            $(".cancel").click(function(){
                $(".promote_mask>div").slideToggle(function(){
                    $(".promote_mask").hide();
                });
            });
       })
    </script>
</body>
</html>

html,
body {
    height: 100%;
    max-height: 100%;
    font-size: 100px;
    background: #fff;
}
.promote_mask,.seeimg_mask{
    position: fixed;
    top:0;
    left:0;
    right:0;
    display: none;
    margin:0 auto;
    width:7.5rem;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:2;
}
.promote_mask>div{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    margin: 0 auto;
    display: none;
    width:100%;
    height:5.78rem;
    z-index:3;
    background:#fff;
}
.seeimg_mask>div{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    margin: 0 auto;
    display: none;
    width:100%;
    height:4.78rem;
    z-index:3;
    background:#fff;
}
.promote_mask .operate{
    padding:0 0.3rem;
    width: 100%;
    height:0.88rem;
    font-size:0.32rem;
    border-bottom: 1px solid #D9D9D9;
    box-sizing: border-box;
}
.promote_mask .operate span{
    display: block;
    width:1rem;
    height:0.88rem;
    font-family:PingFang-SC-Bold;
    color:#666;
    font-weight: 400;
    line-height:0.88rem;
    text-align: left;
}
.promote_mask .operate .title{
    width:4.9rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    text-align: center;
}
.promote_mask .operate .determine{
    color:#FF6602;
    text-align: right;
}
.promote_mask .picture_area{
    padding:0.26rem 0 0.42rem;
    text-align: center;
    box-sizing: border-box;
}
.seeimg_mask .picture_area{
    padding:0.26rem;
    text-align: center;
    box-sizing: border-box;
}
.promote_mask .picture_area p{
    height:0.34rem;
    font-size:0.24rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:0.34rem;
}
.seeimg_mask .picture_area p{
    height:0.34rem;
    font-size:0.24rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:0.34rem;
}
.promote_mask .picture_area .tips{
    height:0.4rem;
    font-size:0.28rem;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.4rem;
}
.seeimg_mask .picture_area .tips{
    height:0.4rem;
    font-size:0.28rem;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.4rem;
    text-align: center;
}
.seeimg_mask .close{
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.16rem;
    background: url("../images/close.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
}
.promote_mask .picture_area .picture_wrapper{
    position: relative;
    margin:0.28rem auto 0.2rem;
    width:4.6rem;
    height:3rem;
    background:rgba(255,255,255,1);
    box-sizing: border-box;
    /* border:1px dashed #f0f0f0; */
}
.promote_mask .picture_area .picture_wrapper #upload_input_again{
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: transparent;
}
.seeimg_mask .picture_area .picture_wrapper{
    position: relative;
    margin:0.28rem auto 0.2rem;
    width:4.6rem;
    height:3rem;
    background:rgba(255,255,255,1);
    box-sizing: border-box;
}
.promote_mask .picture_area .picture_wrapper .progress{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: none;
    font-size:0.32rem;
    line-height: 3rem;
    color:#fff;
    text-align: center;
}