【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的配置 配置与你的外围电路息息相关: 比如下图: 你只能配置为上拉: ...
随机推荐
- buffer格式的转换
---恢复内容开始--- 定义好一个buffer 例如: var buf = new Buffer(''nihaoya); 通过str转成base64的字符 var str =buf.toString ...
- 移动端滑动效果 swiper 4.0.7
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- C_输入一个整数N，输出从0~N（算法思考）
1.for循环实现 #include <stdio.h> #include <time.h> clock_t start, stop; double duration; voi ...
- python pymsql的用法 180903
一.1.pymysql 的下载pip3 install pymysql2.pymysql的使用import pymysqlname=input("请输入用户名:")password ...
- 阿里云 windows 2008 使用Thinkphp5 captcha验证码不显示问题
第一次使用Thinkphp5在阿里云上面运行,后台验证码竟然显示不出来!有种要吐血的感觉...找了半天,终于找到类似解决办法 thinkphp,onethink和thinkox中验证码不显示的解决方法 ...
- django 时区设置 redis token缓存策略
from django.utils.timezone import utcimport datetime datetime.datetime.utcnow().replace(tzinfo=utc)# ...
- 模板设计在tomcat中的应用
tomcat是一个常见的web容器,用户使用它可以很方便地管理servlet小程序,而servlet与tomcat的交互代码设计就用到了模板设计. 何谓模板设计,就是定义一个抽象父类,在该父类中组织子 ...
- mysql 编码问题
有时候insert数据的时候,会报以下异常: ERROR 1366 (HY000): Incorrect string value: '\xE6\x9D\x83\xE9\x99\x90...' for ...
- Mysqlutil.JDBCutil.Dtabaseutil数据库操作工具类[批量操作]
一个用来操作数据库的常用工具类. 提供批量操作,生成建表,插入语句等 操作示例: // 1.获取连接 DataBaseUtil jdbc = new DataBaseUtil(); jdbc.getC ...
- 写一篇博文介绍JSP
一.JSP概述 JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起建立的 ...