【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的配置 配置与你的外围电路息息相关: 比如下图: 你只能配置为上拉: ...
随机推荐
- python学习：格式化输出
格式化输出 代码如下: name = input("Name:") age = input("Age:") job = input("Job:&quo ...
- java+接口自动化+eclipse之-----环境搭建
根据金字塔的比重总结,UI测试占用10%,接口测试占有20%,单元测试占用70%.考虑到之前学过一段时间的单元测试.UI测试,而接口测试未曾接触过,所以最近打算看看接口测试是怎么实现的. 首先,我们先 ...
- JavaFile I/O
Java流类图结构: 流的概念和作用: 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.及数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输特性将抽象为各种类,方便更直观 ...
- html5 Canvas绘制时钟以及绘制运动的圆
1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...
- __x__(21)0907第四天__ css 盒模型 (框模型)
CSS 处理元素,把每个元素都包含在一个盒子里. 对网页的布局,其实就是对盒子的摆放及设置. 边框border,会使盒子变大: .box{ border: 10px 20px 30px 40px r ...
- django 创建model（数据库表）失败
在models.py中创建数据库表 from django.db import models # Create your models here. class Book(models.Model) ...
- golang 学习路径
目录 一 了解 go 二 入门教程 三 安装运行环境 & IDE(goland) 四 gotour 五 简易源码解析 六 开始写代码 七 学习框架 八 惯用法 九 调优 一 了解 go 谷歌一 ...
- [Day19]Collection接口中的子类(List集合、Set集合)
1.List接口 1.1API总结 (1)是一个元素存取有序的集合 (2)是一个带有索引的集合,通过索引可以精确的操作集合中的元素 (3)集合中有可以重复的元素,通过元素的equals方法,来比较是否 ...
- 描述逻辑（DL）基础知识
Logic逻辑理论实际上是一个规范性(normative)的理论,而不是一个描述性的(descriptive)理论.即,它并不是用来描述人类究竟是采用何种的形式来推理的,而是来研究人类应该如何有效的进 ...
- linux中MTDflash设备驱动大概
一.主要结构体 1.mtd_info,主要是描述MTD原始设备层中的设备或分区, 2.mtd_part,表示一个分区,用里面的主mtd_info和本分区mtd_info描述分区, 3.mtd_part ...