【javascript】上拉下拉弹窗实现
JavaScript 实现 弹窗
2023-09-27 14:22:16 时间
<!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; }
相关文章
- JavaScript图形实例:正弦曲线
- javascript怎么禁用浏览器后退按钮
- 浅谈Javascript中Promise对象的实现
- 用 javascript 实现 ping 一个主机,仅测试是否能够连接。
- Html,Css,Dom,javascript细节总结
- JavaScript克隆一个对象
- JavaScript 11. 函数
- JavaScript 4. 输出
- [转]Print.js javascript库 实现页面打印
- 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈
- javascript实现java的map对象,js实现new map()
- 【JavaScript】JS中没有代码块的概念
- JavaScript使用reduce方法实现简单的 i18n 功能
- JavaScript进阶系列06,事件委托
- 理解 JavaScript 的 async/await
- 《JavaScript入门经典(第6版)》——1.7 与用户交互
- 《JavaScript面向对象精要》——1.6 鉴别引用类型
- Django使用JavaScript实现JWT用户登陆、登出
- 原生JavaScript+WebSocket+nodejs实现聊天室功能
- Yep | 李峋爱心代码 python、html+CSS+JavaScript实现
- kettle中使用javascript步骤和fireToDB函数实现自己定义数据库查询
- 【MongoDB】在Mongodb使用shell实现与javascript的动态交互
- 全排列算法 --javascript 实现
- arcgis api for javascript Error: multipleDefine
- javascript节点操作insertBefor()
- JavaScript 自制可以替换属性的模板引擎(Template)