【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的配置 配置与你的外围电路息息相关: 比如下图: 你只能配置为上拉: ...
随机推荐
- Egret--添加一个精灵事件
class Hello extends egret.DisplayObjectContainer{ //入口函数 private onAddStage(event:egret.Event){ //打开 ...
- 根据浏览器判断是下载IOS还是其它的手机安装包
http://tiao.67767.cn/DownLoad.aspx?cid=3509 <!DOCTYPE html> <html> <hea ...
- WebService的两种方式SOAP和REST有什么不同？
REST API 优点: 1. 轻量级的解决方案,不必向SOAP那样要构建一个标准的SOAP XML. 2. 可读性比较好:可以把URL的名字取得有实际意义. 3. 不需要SDK支持:直接一个Http ...
- Web版记账本开发记录（二）开发过程遇到的问题小结1 对数据库的区间查询
问题1 对数据库的区间查询 如功能显示,想要按照年份和月份查询相应的记录,就要使用区间查询 对应的代码如下 servlet层的ChaXun java.sql.Date sDate = new java ...
- 6、echarts使用的坑
实例化id值要用唯一的,一个项目中不能用同一个id, 不然后面的样式覆盖前面的,且后面样式不显示.
- 问题：怎么把mysql的系统时间调整为电脑的时间？(已解决）
我的mysql是5.7版本. 浏览mysql的错误日志的时候,发现时间和电脑时间不一致. 查了一下,知道这个时间和log_timestamps有关, 就在mysql里执行下面一句话: SET GLOB ...
- springboot/Mybatis整合
正题 本项目使用的环境: 开发工具:Intellij IDEA 2017.1.3 springboot: 1.5.6 jdk:1.8.0_161 maven:3.3.9 额外功能 PageHelper ...
- 第三周学习java第四章学习总结及体会！
第三周java 2第四章的学习总结: 一.主要内容(类与对象): 1.类: 2.构造方法与对象的创建: 3.类与程序的基本结构: 4.参数传值: 5.对象的组合: 6.实例成员与类成员: 7.方法重载 ...
- lua 操作redis
Redis在2.6推出了脚本功能,允许开发者使用Lua语言编写脚本传到Redis中执行.使用脚本的好处如下: 1.减少网络开销:本来5次网络请求的操作,可以用一个请求完成,原先5次请求的逻辑放在red ...
- linux-rhel7配置网卡bond双网卡主备模式
参考以下文章中的 2.centos7配置bonding: https://www.cnblogs.com/huangweimin/articles/6527058.html 以下是配置过程的操作和打印 ...