【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:;
left:;
right:;
display: none;
margin:0 auto;
width:7.5rem;
height:100%;
background:rgba(0,0,0,0.6);
z-index:;
}
.promote_mask>div{
position:fixed;
bottom:;
left:;
right:;
margin: 0 auto;
display: none;
width:100%;
height:5.78rem;
z-index:;
background:#fff;
}
.seeimg_mask>div{
position:fixed;
bottom:;
left:;
right:;
margin: 0 auto;
display: none;
width:100%;
height:4.78rem;
z-index:;
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:;
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:;
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:;
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:;
-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:;
left:;
width:100%;
height:100%;
display: none;
font-size:0.32rem;
line-height: 3rem;
color:#fff;
text-align: center;
}
【javascript】上拉下拉弹窗实现的更多相关文章
- iOS不得姐项目--精华模块上拉下拉的注意事项,日期显示,重构子控制器,计算cell的高度(只计算一次),图片帖子的显示
一.上拉下拉注意事项 使用MJRefresh中的上拉控件自动设置透明 当请求下页数据通过page的时候,注意的是上拉加载更多数据失败的问题,下拉加载数据失败了,页数应该还原.或者是请求成功的时候再将页 ...
- 练习使用XRecyclerView，可上拉下拉刷新。
package com.lixu.testxrecyclerview; import android.support.v7.app.AppCompatActivity; import android. ...
- iOS不得姐项目--推荐关注模块(一个控制器控制两个tableView),数据重复请求的问题,分页数据的加载,上拉下拉刷新(MJRefresh)
一.推荐关注模块(一个控制器控制两个tableView) -- 数据的显示 刚开始加载数据值得注意的有以下几点 导航控制器会自动调整scrollView的contentInset,最好是取消系统的设置 ...
- ListView实现上拉下拉刷新加载功能
第一步.首先在你项目中创建一个包存放支持下拉刷新和上拉加载的类:
- 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
博客已迁移至http://zlwis.me. 使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解 ...
- swift实现UItableview上拉下拉刷新模块
最近用写个项目 发现上拉下拉刷新模块没找到合适的 so 自己写了一个 由于最近忙 教程就不写了 里面有 直接贴地址https://github.com/DaChengTechnology/DCRefr ...
- 打造android万能上拉下拉刷新框架——XRefreshView (二)
打造Android万能上拉下拉刷新框架--XRefreshView(一) 打造Android万能上拉下拉刷新框架--XRefreshView(三) 一.前言 自从上次发表了打造android万能上拉下 ...
- 打造Android万能上拉下拉刷新框架--XRefreshView（三）
转载请注明出处:http://blog.csdn.net/footballclub/ 打造Android万能上拉下拉刷新框架–XRefreshView(一) 打造Android万能上拉下拉刷新框架–X ...
- GPIO端口上拉下拉 与 硬件图的上拉下拉
硬件图上的上拉下拉: 没有触发时默认接到IO的是高电平就是上拉: 没有触发时默认接到IO的是低电平就是 下拉: (2)对应GPIO的配置 配置与你的外围电路息息相关: 比如下图: 你只能配置为上拉: ...
随机推荐
- Java当中的IO一
1.IO操作的目标 什么是IO操作的目标? 输入: 从数据源当中读取数据 输出: 将数据写入到数据目的地当中 有数据进入到程序当中,这个过程就可以被叫做输入 流:即在数据源与程序之间建立的传输通道 2 ...
- react_app 项目开发
react_app 项目开发 npm install -g create-react-app npm root -g // 查看安装包位置 创建项目 create-react-app m ...
- 面向面试编程代码片段之GC
x 代码 using System; using System.Threading; public static class Program{ public static void Main(){ T ...
- 2018-2019-2 网络对抗技术 20165311 Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165311 Exp3 免杀原理与实践 免杀原理及基础问题回答 实验内容 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil- ...
- pta编程总结
币值转换 (20 分) 输入一个整数(位数不超过9位)代表一个人民币值(单位为元),请转换成财务要求的大写中文格式.如23108元,转换后变成“贰万叁仟壹百零捌”元.为了简化输出,用小写英文字母a-j ...
- [archlinux]在linux使用aria2下载磁力链接
1．在公网出口做好dnat,端口映射,虚拟服务等.导致内网主机的udp和tcp端口上. 2．在linux主机上,加两条防火墙规则 ┬─[tong@T7:~]─[:: PM] ╰─>$ sudo ...
- WinAPI 字符及字符串函数(5): IsCharAlpha - 是否是个字母
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...
- B-Tree与B+Tree简明扼要的区别
原文:https://blog.csdn.net/zhuanzhe117/article/details/78039692 看了很多讲B树和B+树的文章,大多都是围绕各自的特性讲的,第一,树中每个结点 ...
- 完美脱离Windows!! Linux发行版第一系统 Manjaro 开箱教程 :)
没兴趣? 来几张图敌敌畏(kai kai wei) !! 0x00 预览(zhuangbi) 0x01 引言(feihua) 当我们想用ssh工具时,不像telnet那样是系统自带的软件,需要额外安装 ...
- es5原型式继承间解
1. 原型式继承方法 js 继承使用不难,要说清楚,需要自己一定总结,才能说清楚. es5 的继承方式有很多种,这个是 js 语言本身造成,但是类实现继承之后的功能,有如下 3 条: 子类继承父类,主 ...