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