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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
js实现前端界面导航栏下拉列表
Aug 27 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常用的缓存技术汇总
2014/05/05 PHP
js实现的map方法示例代码
2014/01/13 Javascript
js单词形式的运算符
2014/05/06 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
Python多进程机制实例详解
2015/07/02 Python
Python获取邮件地址的方法
2015/07/10 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Django-migrate报错问题解决方案
2020/04/21 Python
Python 读取位于包中的数据文件
2020/08/07 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
借款担保书范文
2014/05/13 职场文书
2015年司法局工作总结
2015/05/22 职场文书
开学第一周总结
2015/07/16 职场文书
2016年元旦致辞
2015/08/01 职场文书
运动会广播稿100字
2015/08/19 职场文书