html js控制页面蒙版,javascript实现蒙版与禁止页面滚动

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

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

蒙版与禁止滚动

.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;

}

内容

按钮

$(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' });

}

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html js控制页面蒙版,javascript实现蒙版与禁止页面滚动相关推荐

js控制禁用退格键回到上一个页面
js控制禁用退格键回到上一个页面我们在真实的项目开发中经常会使用JS 对键盘上的一些按键进行禁用,常见的比如说退格键(backspace/ 后退键),我在一个项目中就遇到过在页面编辑的时候禁用掉退格 ...
js控制html输出,JavaScript 输出
JavaScript 输出 JavaScript 通常用于操作 HTML 元素. 操作 HTML 元素如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getEl ...
js控制 html.textboxfor,javascript - Html.TextBoxFor regex is not working - Stack Overflow
I have two helpers: Html.TextBox and Html.TextBoxFor Html.TextBox(someId, someValue, new { @class = ...
js控制div属性隐藏方法
原文详解:js控制div属性隐藏方法如题:编写html时如何用js控制div的显示和隐藏. 假定页面展示内容如下: 1.点击触发事件: <div><button class=&qu ...
js 控制页面跳转的5种方法
js 控制页面跳转的5种方法编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的History.back是回退一页Histiory.go(1)前进一页Histo ...
HTML开发完美解决移动端H5页面pop弹出蒙版后底层滑动问题
html 弹出蒙版后禁止底层滑动在对应的最外层(蒙版父视图),添加css position: relative; 蒙版层使用 position: fixed; 然后点击弹出蒙版和关闭蒙版调用下面的 ...
Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
js主要是用来向html页面中,JavaScript主要作用是什么？
学习编程的同学对JavaScript并不陌生,JavaScript是前端技术中非常重要的内容.例如页面的效果切换.动画效果.页面游戏等等.其实我们功通过HTML和CSS技术已经可以搭建各种样式的页面, ...
html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
JavaScript location.reload() 方法 Location 对象的 reload() 方法用于重新加载当前文档(页面),语法如下: location.reload( false| ...

html js控制页面蒙版,javascript实现蒙版与禁止页面滚动

html js控制页面蒙版,javascript实现蒙版与禁止页面滚动相关推荐

最新文章

热门文章