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 相关文章推荐
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
Node.js模块加载详解
2014/08/16 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
React Router基础使用
2017/01/17 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Python 处理文件的几种方式
2019/08/23 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
六查六看剖析材料
2014/02/15 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
119消防日活动总结
2014/08/29 职场文书
赞助商致辞
2015/07/30 职场文书
DE1107机评
2022/04/05 无线电