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 1.0.2
Oct 11 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
实习教师自我鉴定
2013/12/09 职场文书
平民服装店创业计划书
2014/01/17 职场文书
网络营销策划方案
2014/06/04 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
房屋维修申请报告
2015/05/18 职场文书
放牛班的春天观后感
2015/06/01 职场文书
PHP控制循环操作的时间
2021/04/01 PHP