实用的弹出层效果(阻止浏览器的默认行为)_前端阻止浏览器刷新的默认行为并取消弹框弹出-程序员宅基地

技术标签: 移动  弹出层效果  前端  

实用的弹出层效果(阻止浏览器的默认行为)


自己写的,分享给大家,相信前端同学都能用得到

在移动端时经常遇到经常说到的浏览器的默认行为,由于浏览器默认的为冒泡型事件触发机制,所有会触发你不想触发的事件,
尽管蒙层显示,滑动时底部的内容也会透过弹出层继续滑动,导致蒙层底部会有白边,

  • 1、在蒙层显示时阻止浏览器的默认行为
  • 2、在蒙层消失是恢复浏览器的默认行为

代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>弹框</title>
</head>
<body id="bodys">
    <div class="btn" id="Return">点击</div>
    <div class="hide_mask" id="hide_mask"></div>
    <div class="hideBox-main" id="hideBox-main">
            <div class="hideBox-box" id="hideBox-box">弹出层</div>
      </div>
    <script type="text/javascript">
        function $(id){
     
            return document.getElementById(id);
        }
        var bodyScroll = function (e) {
      e.preventDefault(); },
            returnBtn = $('Return'),
            hide_mask = $('hide_mask'),
            hideBox = $('hideBox-main');
        returnBtn.onclick=function(){
     
            hide_mask.style.display="block";
            hideBox.style.display="block";
            document.addEventListener('touchmove',bodyScroll,false);
            hide_mask.onclick=function(){
     
                this.style.display="none";
                hideBox.style.display="none";
                document.removeEventListener('touchmove',bodyScroll,false);
            }
        }
    </script>
</body>
</html>

css代码

*{
    margin:0;padding: 0;list-style:none;font:normal normal 300 16px/1.5 "微软雅黑",arial,verdana;}
.btn{
    width: 50%;margin: 50% auto;line-height: 40px;text-align: center;line-height: 40px;background: #008573;color: #fff;}
.hide_mask{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.5);
    display: none;
}
.hideBox-main{
   position: fixed;
    left:50%;
    top: 30%;
    width:60%;
    height: 160px;
     margin-left: -30%; 
    overflow: hidden;
    z-index: 1099;
    font-weight: 400;
    text-align: center;
    background-color: transparent;
    background:#fff;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;
    border-radius: 3px;
    display: none;
    -webkit-animation:zoomIn 0.2s ease;
    animation-name:zoomIn 0.2s ease;
}
.hideBox-btn{
    height: 53px;
    line-height: 53px;
    text-align: center;
    font-size: 17px;
    color: #fa2855;
    border-top: 1px solid #e3e3e3;

}
.hideBox-box{
    height: 180px;
    line-height: 160px;
    font-size: 18px;
}
@-webkit-keyframes zoomIn{
0%{
    opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{
    opacity:1}
}
@keyframes zoomIn{0%{
    opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{
    opacity:1}}
.zoomIn{
    -webkit-animation-name:zoomIn;animation-name:zoomIn}

请留言指教,哈哈哈!!!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gh1205/article/details/52034815

智能推荐

Ubuntu16.04+ros+orbslam2_relsense orbslam2-程序员宅基地

文章浏览阅读254次。intel realsens D435相机的开发系统 Ubuntu16.04 ,ROS相机 Intel realsense d435算法 ORBSLAM21.安装基于ROS使用的realsense的包(这里面包含realsense SDK和ROS kinetic)2.编译ORB-SLAM2(build.sh和build_ros.sh)3.获取相机信息,实现数据传输并进行深度图像配准。一:安装RealSense SDK2.01.下载源码:$ git clone https:_relsense orbslam2

记一次调试iOS杀进程崩溃的问题_ios 杀掉进程后提示崩溃-程序员宅基地

文章浏览阅读700次。iOS在用xcode调试的时候由于关闭了Watchdog监控,所以好多提审后才能发现的问题都检测不出来。后来经过各种测试终于发现是自己开了一个写文件的线程在程序退出的时候没有关闭导致的!_ios 杀掉进程后提示崩溃

我也没想到,Java开发 API接口可以不用写 Controller了-程序员宅基地

文章浏览阅读348次。大家好,我是小富~今天介绍我正在用的一款高效敏捷开发工具magic-api,顺便分享一点工作中使用它的心得缘起先说一下我为什么会使用这个工具?最近新启动一个项目,业务并不算复杂,那种典型的..._什么框架是没有controller

第三方软件测试z5x电池,vivo Z5x第三方续航测试结果公布,刷新手机业续航排行榜...-程序员宅基地

文章浏览阅读185次。原标题:vivo Z5x第三方续航测试结果公布,刷新手机业续航排行榜千元机能给你带去什么样的使用体验?vivo Z5x用实力告诉你,千元机除了价格亲民,实力更是不同反响。近日,vivo Z5x正式发布了。从官方信息上,我们看到一部性能强劲、外观漂亮、价格亲民的手机诞生了。特别是vivo Z5x拥有的5000mAh超大电池,更是引发了无数讨论。这块大容量电池,续航能力到底如何呢?在未发布之前,viv..._vivoz5x耗电太快官方回应

maven的依赖传递_maven依赖传第-程序员宅基地

文章浏览阅读126次。maven的依赖传递1)依赖的优先级关系2)隐藏jar包说明:被依赖的项目不希望自己所引用的jar包被其他人看见,可以使用标签实现;3)排除多余的依赖4)依赖范围5)生命周期_maven依赖传第

keepalived+MySQL实现高可用-程序员宅基地

文章浏览阅读904次,点赞2次,收藏9次。(一)keepalived概述Keepalived通过VRRP(虚拟路由冗余协议)协议实现虚拟IP的漂移。当master故障后,VIP会自动漂移到backup,这时通知下端主机刷新ARP表,如果业务是通过VIP连接到服务器的,则此时依然能够连接到正常运行的主机,RedHat给出的VRRP工作原理如下图:本来对VIP漂移有一定了解的我,看了上面的图后,越来越懵了。因此只能根据我的个人理解,..._keepalived+mysql高可用

随便推点

二维数组对应的指针 C语言,C语言怎么用指针代替二维数组-程序员宅基地

文章浏览阅读313次。1.设p是指向二维数组a[m][n]的指针变量,则有:int* p=a[0];//此时P是指向一维数组的指针。P++后,p指向 a[0][1]。2.如果定义int (*p1)[n];p1=a;p1++后,p1指向a[1][0];则p+j将指向a[0]数组中的元素a[0][j]。由于a[0]、a[1]┅a[M-1]等各个行数组依次连续存储,则对于a数组中的任一元素a[i][j],指针的一般形式如下:..._stm32怎么用指针替代二维数组

Tmux常用命令及快捷键_tmux 快捷键-程序员宅基地

文章浏览阅读8.7k次,点赞6次,收藏94次。Tmux 是一个终端复用器(terminal multiplexer),非常有用,属于常用的开发工具。Tmux的功能:(1)它允许在单个窗口中,同时访问多个会话。这对于同时运行多个命令行程序很有用。(2)它可以让新窗口"接入"已经存在的会话。(3)它允许每个会话有多个连接窗口,因此可以多人实时共享会话。(4)它还支持窗口任意的垂直和水平拆分。类似的终端复用器还有 GNU Screen。Tmux 与它功能相似,但是更易用,也更强大。Tmux的安装# Ubuntu$ sudo apt-ge_tmux 快捷键

2017ACM/ICPC亚洲区沈阳站 补题 | 题解_new self-describing sequence-程序员宅基地

文章浏览阅读828次。补题题号:CFGHIKLM6217 BBP Formula 2017ACM/ICPC亚洲区沈阳站-重现赛(感谢东北大学) (345/608)56.74%6218 Bridge 2017ACM/ICPC亚洲区沈阳站-重现赛(感谢东北大学) (88/294)29.93%6219 Empty Convex Polygons 2017ACM/ICPC亚洲区沈阳站-重现赛(感谢东北大学) (450/1435)31.36%6220 Defense of the Ancients 2017ACM/ICPC_new self-describing sequence

局域网内恶作剧_kali的arp攻击、密码嗅探、图片嗅探的演示_命令行输入 driftnet -i eth0 -a -d img -s 即可开始图片嗅探。 在本机浏-程序员宅基地

文章浏览阅读3.2w次,点赞8次,收藏74次。图文讲解kali在局域网内的apr攻击、嗅探操作。上手快!_命令行输入 driftnet -i eth0 -a -d img -s 即可开始图片嗅探。 在本机浏览器输入

VMWare 12 安装 MAC OS_vmware workstation 15 player 安装 mac os-程序员宅基地

文章浏览阅读199次。有些朋友想体验苹果系统,却因MACbook太贵而无缘体验,好在这个世界从来不缺大神,给我们提供福利,能够在虚拟机里体验MAC OS带来的畅快先看一下安装后的效果需要用到的工具1、VMWare 12 ,自行网上下载,或者在下面的链接下载链接:https://pan.baidu.com/s/1kBYLXJBrCF7qyY5dgjxcLQ提取码:p9xh2、unlocker,就用我下面的链接下载吧,保证你能用链接:https://pan.baidu.com/s/1Iz4G5..._vmware workstation 15 player 安装 mac os

第4.1.3章 flume写入数据到hbase中_flume实时数据写入hbase-程序员宅基地

文章浏览阅读1.2k次。1、环境准备1.1 flume组件开发环境flume组件依赖的jar如下:<!-- provided --> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version&..._flume实时数据写入hbase

推荐文章

热门文章

相关标签