javascript实现蒙版与禁止页面滚动


Posted in Javascript onJanuary 11, 2020

本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码,供大家参考,具体内容如下

项目需求:页面很长,要求加个蒙版,点击特定位置蒙版消失可以滑动页面,否则蒙版存在页面不可以滑动;要同时兼容移动端和pc端。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
  <title>蒙版与禁止滚动</title>
  <style>
    .container{
      width:200px;
      height:2000px;
      background-color:blue;
    }
    .modal{
      width: 100%;
      position:fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999;
      background-color: rgba(0,0,0,0.7);
      background-size: 100%; 
    }
    .p{
      font-size: 50px;
      color:red;
      text-align:center;
    }
  </style>
</head>
<body>
  <div class="container">
    <p>内容</p>
  </div>
  <!-- 蒙版 -->
  <div class="modal">
    <p class="p">按钮</p>
  </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>
$(function(){
  // 阻止蒙版后页面滑动
  if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  //移动端
    $(".modal").on('touchmove',function(e){
      e.stopPropagation();
      e.preventDefault();
      $('.p').click(function(){
        $(this).parent().hide();    
      })
    })
  } else {
    //PC端
    var flag=true;
    $('.p').click(function(){
      $(this).parent().hide();
      $('body').css({  "overflow":'visible'});
      flag=false;   
    })
    if(flag)
      $('body').css({  "overflow":'hidden' });
  }
})
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery插件开发基础简单介绍
Jan 07 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
jquery实现显示已选用户
Jul 21 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
js实现蒙版效果
Jan 11 #Javascript
js实现橱窗展示效果
Jan 11 #Javascript
vue实现购物车选择功能
Jan 10 #Javascript
webpack proxy 使用(代理的使用)
Jan 10 #Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 #Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 #Javascript
jQuery操作动画完整实例分析
Jan 10 #jQuery
You might like
PHP脚本的10个技巧(1)
2006/10/09 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python有证书的加密解密实现方法
2014/11/19 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python编写Logistic逻辑回归
2020/12/30 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
解决Mac下使用python的坑
2019/08/13 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
学校卫生检查制度
2014/02/03 职场文书
市场营销调查计划书
2014/05/02 职场文书
幼儿园运动会口号
2014/06/07 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python