<!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】上拉下拉弹窗实现的更多相关文章

  1. iOS不得姐项目--精华模块上拉下拉的注意事项,日期显示,重构子控制器,计算cell的高度(只计算一次),图片帖子的显示

    一.上拉下拉注意事项 使用MJRefresh中的上拉控件自动设置透明 当请求下页数据通过page的时候,注意的是上拉加载更多数据失败的问题,下拉加载数据失败了,页数应该还原.或者是请求成功的时候再将页 ...

  2. 练习使用XRecyclerView，可上拉下拉刷新。

    package com.lixu.testxrecyclerview; import android.support.v7.app.AppCompatActivity; import android. ...

  3. iOS不得姐项目--推荐关注模块(一个控制器控制两个tableView),数据重复请求的问题,分页数据的加载,上拉下拉刷新(MJRefresh)

    一.推荐关注模块(一个控制器控制两个tableView) -- 数据的显示 刚开始加载数据值得注意的有以下几点 导航控制器会自动调整scrollView的contentInset,最好是取消系统的设置 ...

  4. ListView实现上拉下拉刷新加载功能

    第一步.首先在你项目中创建一个包存放支持下拉刷新和上拉加载的类:

  5. 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题

    博客已迁移至http://zlwis.me. 使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解 ...

  6. swift实现UItableview上拉下拉刷新模块

    最近用写个项目 发现上拉下拉刷新模块没找到合适的 so 自己写了一个 由于最近忙 教程就不写了 里面有 直接贴地址https://github.com/DaChengTechnology/DCRefr ...

  7. 打造android万能上拉下拉刷新框架——XRefreshView (二)

    打造Android万能上拉下拉刷新框架--XRefreshView(一) 打造Android万能上拉下拉刷新框架--XRefreshView(三) 一.前言 自从上次发表了打造android万能上拉下 ...

  8. 打造Android万能上拉下拉刷新框架--XRefreshView（三）

    转载请注明出处:http://blog.csdn.net/footballclub/ 打造Android万能上拉下拉刷新框架–XRefreshView(一) 打造Android万能上拉下拉刷新框架–X ...

  9. GPIO端口上拉下拉 与 硬件图的上拉下拉

    硬件图上的上拉下拉: 没有触发时默认接到IO的是高电平就是上拉: 没有触发时默认接到IO的是低电平就是 下拉: (2)对应GPIO的配置 配置与你的外围电路息息相关: 比如下图: 你只能配置为上拉: ...

随机推荐

  1. php curl请求和获取接口数据

    curl请求和获取接口数据 class ToolModel{ /** * [http 调用接口函数] * @Author GeorgeHao * @param string $url [接口地址] * ...

  2. 分类器、logistic回归

    相关性 1.相关性是一种测度,用来表示两个变量在同一方向上发生变化的程度,如果x和y在变化方向上相同,那么这两个变量就是正相关:如果变化方向相反,就是负相关:如果变量之间没有关系,那么相关性就是0. ...

  3. [LeetCode] Flatten a Multilevel Doubly Linked List 压平一个多层的双向链表

    You are given a doubly linked list which in addition to the next and previous pointers, it could hav ...

  4. linux ---docker篇

    Docker docker是什么? docker最初是dotCloud公司创始人Solomom Hykes在法国期间发起的一个公司内部项目,它是基于dotCloud公司多年云服务技术的一次革新,并在2 ...

  5. ant安装报错：ANT_HOME is set incorrectly or ant could not be located. Please set ANT_HOME.

    后来发现问题原因是没有设置classpath,或者是\的原因: 正确配置如下:  ANT_HOME:D:\ant\apache-ant-1.10.5 CLASSPATH: %ANT_HOME%\lib ...

  6. Python reverse()方法--list

    描述 reverse()方法:用于反转列表元素的排列顺序. 语法 语法格式:list.reverse() 参数 NA 返回值 无返回值 实例 #!/usr/bin/python3 a = ['abc' ...

  7. [ionic3.x开发记录]ng-content使用

    在ionic开发公用组件的时候,我一直在想有没有angular有没有像vue一样的slot插槽.方便组件后期扩展. 然后去翻文档,发现有ng-content这么个东西,用法很像vue的slot. 组件 ...

  8. 有几个PAT

    描述 字符串APPAPT中包含了两个单词“PAT”,其中第一个PAT是第2位(P),第4位(A),第6位(T):第二个PAT是第3位(P),第4位(A),第6位(T). 现给定字符串,问一共可以形成多 ...

  9. 写一个方法，用于解读 url 后面的请求参数，最终得到 {"a"：2，"b"：3，"c"：4}；

    function getUrlParams(url){ let searchParam = url.split("?")[1]; let searchItemParams = se ...

  10. Java中equals，hashcode，==的区别

    ==  :比较java栈局部变量表中变量的地址或值是否相等. equals : 比较变量的地址在java堆中引用对象是否为同一个对象. hashcode : 通过对象在JVM内存中的存储地址通过特定算 ...