【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课程课后作业之19学期之第一周博客作业
作为一个大二的学生,自己已经不小了,没有大一那个时候的无忧无虑的可以放纵的时光,只剩下一年,我就该做出我人生的下一个重大决定了,这一次真的是我一个人的决定,从小到大,父母为我做过很多的决定,即使在小的 ...
- 【管理篇】用户故事STORY
项目管理中,常常听说story,用户故事 “一开始就做对系统”纯属神话,反之,我们应该去实现今天的用户故事,然后重构,明天再拓展系统.实现新的用户故事.这就是迭代和增量敏捷的精粹所在.
- css样式兼容各个浏览器时的部分总结
[本文基本是在网络转发过来的,网站就忘记了,这文本都是保存在自己电脑本地的,还有些自己添加了些内容,这内容还会有不断的完善和更行的] 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 ...
- Ehcache 3.7文档—基础篇—GettingStarted
为了使用Ehcache,你需要配置CacheManager和Cache,有两种方式可以配置java编程配置或者XML文件配置 一. 通过java编程配置 CacheManager cacheManag ...
- PPT领取 | 70+数据科学、架构演进等最佳实践限时放送
上世纪1950年人工智能被提出,直至2016年AlphaGo战胜世界围棋冠军李世石后,人工智能迅速引起了全球的瞩目,并推动起全球科技的浪潮.自动驾驶.人脸识别.语音交互技术等“一拥而上”,众多AI科技 ...
- JDK安装路径下的JRE与独立安装的JRE区别
在JDK安装目录下的子文件下,已经默认安装了一个jre.且与独立安装的JRE6所包含的文件几乎完全一样. JDK里面内置的JRE和独立的JRE是有一点差别的: 在JDK安装文件中包含了一个完整的独立版 ...
- having 的使用
.用一条SQL 语句 查询出每门课都大于80 分的学生姓名 name kecheng fenshu 张三 语文 张三 数学 李四 语文 李四 数学 王五 语文 王五 数学 王五 英语 select n ...
- c#4.8-4.11学习总结
4.8讲的是static 关键字.它用于修饰类 ,字段 ,属性,方法和构造方法等.被它修饰的类称为静态类,成员称为静态成员. 先说静态字段,它是普通字段前面加个static,它不属于任何对象,只属于 ...
- python之dict
一.字典的定义 在python中,字典数据类型使用{}来定义,在大括号中,存储的是键值对,即key:value的形式,并且key不能有重复值,如果有重复,后面的值会覆盖前面的:值可以重复 # 字典的定 ...
- Win10 将slim加入PYTHONPYTH
1.LINUX 命令 export PYTHONPATH=$PYTHONPATH:'pwd':'pwd'/slim 2.Windows 命令 SET PYTHONPATH=%cd%;%cd%\slim ...