移动端 弹框下边的内容 禁止滑动的解决方案

移动端

当弹框出现的时候,让弹框下边的内容不能做点击、滑动等操作。

需要将body和html都设置(只设置任何一个,不管事):

$("body").css({"height": "100%","overflow":"hidden"});
$("html").css({"height": "100%","overflow":"hidden"});

当弹框消失的时候,

清除设置样式:

 $("body").css({"overflow":""});
 $("html").css({"overflow":""});

原文地址:https://www.cnblogs.com/veraNotes/p/12123592.html

时间: 2024-11-03 06:42:03

移动端 弹框下边的内容 禁止滑动的解决方案的相关文章

vue移动端弹框组件

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦! 一.npm 安装 // 当前最新版本 1.2.0  npm install vue-layer-mobile // 如新版遇到问题可回退旧版本  npm install [email protected] 二.调整配置:因为这个组件中有woff,ttf,eto,svg

vue移动端弹框组件的实例

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦! 一.npm 安装 ? 1 2 3 4 // 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 npm install [email protected] 二.调整配置:因为这个组件中有woff,ttf

vue移动端弹框组件,vue-layer-mobile

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦! 一.npm 安装 // 当前最新版本 1.2.0  npm install vue-layer-mobile // 如新版遇到问题可回退旧版本  npm install [email protected] 二.调整配置:因为这个组件中有woff,ttf,eto,svg

js弹框显示全部内容

1 file=file.replace(/\r\n/g,"<br>"); //回车换行显示 2 file=file.replace(/\n/g,"<br>"); 3 OpenWindow=window.open("", "newwin", "height=600, width=1000,top=150 ,left=220 ,scrollbars=yes, resizable=yes, tool

使用mint-ui中弹框组件与原生弹框阻止父页面不滑动方法

1,使用mint-ui框架中<mt-popup></mt-popup>,在组件中加入 lockScroll="true" 阻止父页面不滑动. 2,原生弹框中,弹框页面中最外层div里面加(touchmove事件)@touchmove="handleTouchmove" 然后在methods方法里面加入 handleTouchmove (e) { e.preventDefault() }, 阻止父页面不滑动 原文点击:https://blog.

自己封装一个弹框插件

弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高. 首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层

boostrap弹框之BootstrapDialog

function dialogInit(){ var $html = $('<div><ul><li><span>这是弹框里面的内容</span></li></ul></div>') var dialog = new BootstrapDialog({ title: '弹框标题', message: $html,//弹框中间的内容 buttons: [{ label: '取消', action: functio

考拉Android统一弹框

作者:钱成杰 背景 在快速开发的背景下,经历了n个版本后的考拉Android App中已经存在了各种各样看似相同却各有差别的弹框样式.其中包括系统弹框和自定义弹框,并且在线上时常会出现IllegalArgumentException的异常,而现有的解决方法是通过工具类来保护调用show和dismiss方法,这种方式效率不高,而且覆盖不全,开发过程中容易遗漏.另外现有的Builder方式的弹框构造工具虽然功能强大,能构造各种弹框,但是使用复杂,样式逻辑耦合,使用成本太高.于是,便需要一款样式统一.

echart地图+散点图表,点击散点触发BootstrapDialog弹框

echart地图和散点图结合,点击散点触发BootstrapDialog弹框. 需要引入文件jquery.bootstrap.bootstrap-dialog.min.js.echarts.min.js.echart地图用的china.js function repCityStrategy(rsData){//触发echart地图的,rsData是传给echart的数据 var mapType = $('#selectCityPrev').find('option:selected').val(