移动端弹出层加遮罩后禁止滑动

//实现滚动条无法滚动
var mo=function(e){e.preventDefault();};

/***禁止滑动***/
function stop(){
        document.body.style.overflow=‘hidden‘;
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
}

/***取消滑动限制***/
function move(){
        document.body.style.overflow=‘‘;//出现滚动条
        document.removeEventListener("touchmove",mo,false);
}

原理就是利用 overflow:hidden;

时间: 2024-11-01 03:10:58

移动端弹出层加遮罩后禁止滑动的相关文章

简单的弹出层加遮罩层效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

移动端弹出层滚动穿透问题总结

移动端弹出层(简称layer)时,层内有大量文字需要滚动,但是背景层(简称body)会随着layer的滚动而滚动,用户体验较差.参考了网上的一些资料,总结解决方案如下: .scrollFix{ height: 100%; overflow: hidden; position: relative;}.scrollFix body{ height: 100%; overflow: hidden;} 弹出层前: //防止body层向下滚动后出现内容显示不全的问题$('html,body').anima

jquery制作弹出层带遮罩效果,点击阴影部分层消失

jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 1 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a> 2 <div id="myModal" class="reveal-modal&quo

弹出层带遮罩显示在屏幕正中间

最近项目中用到了遮罩层,在这里总结下以备下次使用. 首先,遮罩应全屏,同时需要兼容多种浏览器,需要设置div的样式为: 复制代码 1 position:absolute; 2 top:0%; /**遮罩全屏top,left都为0,width,height为100%**/ 3 left:0%; 4 width:100%; 5 height:100%; 6 filter:alpha(opacity=50); 7 opacity: 0.5; 8 -moz-opacity:0.5; 9 -khtml-o

实现弹出层,遮罩层

开发中经常会用到弹出遮罩层的时候,下面是一个简单的遮罩层弹窗 <style type="text/css"> <!-- body,td,th { font-size: 12px; padding:0; margin:0; } .tanchuang{ width:100px; height:100px;position:absolute;left: 0px;top: 0px;z-index:100; display:none;} .box{width:600px;z-i

实现移动端弹出层弹出的时候页面不能滑动,关闭弹出层时页面恢复滑动

思路是:显示弹层时,禁用触摸事件 在你显示弹出框的时候:添加: function ShowDiv() { window.ontouchmove = function(e) { e.preventDefault && e.preventDefault(); e.returnValue = false; e.stopPropagation && e.stopPropagation(); return false; } } 在关闭弹层时,添加: function CloseDiv

移动端弹出层之后禁用底部滚动条关闭回到原位置

$("cli-open").click(function(){ var scrollTop = document.body.scrollTop;//保存点击前滚动条的位置 window.onscroll=function(){ document.body.scrollTop = scrollTop;//赋值给滚动条的位置 }}) $(".cli-close").click(function(){ window.onscroll=function(){ documen

移动端弹出层滚动卡顿解决方案

IOS: -webkit-overflow-scrolling: touch; overflow-scrolling: touch; 安卓: -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 安卓的表现仍然不够流畅.但是至少没之前那么卡顿了... 原文地址:https://www.cnblogs.com/dodocie/p/8685901.html

自定义弹出层居中并显示遮罩

1.自己先定义两个div,一个是用来放弹出层内容的,一个是用于设置遮罩层颜色的,一个触发显示弹出层的按钮 2.给两个div分别设置css样式,遮罩的样式主要有:position:fixed;z-index:2;background-color:#000;opacity:0.7;top:0;left:0;width:100%;height:100%;display:none; 显示弹出层内容的主要有:postion:fixed;display:none;top:50%;left:50%;z-ind