禁止弹窗后body滚动(jQuery实现)

最新推荐文章于 2023-12-01 11:23:34 发布
最新推荐文章于 2023-12-01 11:23:34 发布
阅读量1k 收藏 1
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/motor_tang/article/details/88715586
版权

禁止弹窗后body滚动jQuery实现


demo的源码如下: 

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		* {
   
			margin: 0;
			padding: 0;
		}

		html,
		body {
   
			height: 100%;
		}
		header {
   
			width: 100%;
			height: 45px;
			background-color: #ff4019;
			color: #fff;
			text-align: center;
			line-height: 45px;
		}
		.content {
   
			padding: 0 10px;
		}
		.content >p {
   
			width: 100%;
			padding: 10px 0;
			text-align: center;
		}
		.btn {
   
			width: 60px;
			heigh: 36px;
			border-radius: 4px;
			font-size: 14px;
			background-color: #ff4019;
			margin: 0 auto;
			text-align: center;
			color: #fff;
		}


		.popup {
   
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5)
最低0.47元/天 解锁文章
伞兵不吃巧克力
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui combobox java_[Java教程]EasyUI combobox
weixin_42560067的博客
02-13 171
[Java教程]EasyUI combobox02016-12-23 11:00:05高度自适应data-options="required:true,editable:false,panelHeight:'auto',panelMaxHeight:170"加上panelHeight:'auto'即可取值问题例子：在对其取值的时候?//不能使用 $('#cc').val()//正确应该//取ID...
jquery弹窗时禁止body滚动条滚动
weixin_30426957的博客
06-14 206
当弹出一个jq提示窗口的时候，一般窗口右边还会有进度条的情况，禁止进度条方法禁止浏览器滚动条滚动： $('body').css({ 　　"overflow-x":"hidden", 　　"overflow-y":"hidden" }); 关闭弹出的窗口的时候需要显示出来，让浏览器窗口可以继续滚动 还原滚...
移动端当弹出层显示，阻止body的滑动
W810455109的专栏
05-24 111
很多时候前端在做移动端有弹出层的时候，滑动屏幕，body还是可以滑动，这些时候就要阻止，话不多说，直接看代码 首先定义一个变量，我这边定义的是stop=1，当弹出层显示，stop=0,然后监听touchmove事件，阻止冒泡和默认行为，这样效果就达到了。 document.addEventListener("touchmove", function (e) { 　　if...
弹出遮罩层后禁止滚动效果【实现代码】
u013861109的博客
09-01 4383
转载请注明出处 原文连接http://blog.huanghanlian.com/article/5c7dcff2d44d566942995d58 方法一： $('.shade').bind( "touchmove", function (e) { e.preventDefault(); }); 方法二： $("body,.main").height($(window...
jquery弹窗时禁止body滚动条滚动的例子
10-16
今天小编就为大家分享一篇jquery弹窗时禁止body滚动条滚动的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
手机弹窗 禁止body滚动
04-09
在本篇文章中，我们将详细探讨如何实现“手机弹窗禁止body滚动”的效果。 首先，我们需要理解H5页面的滚动机制。在HTML5中，页面的滚动行为主要由`body`元素或设置`overflow`属性的容器来控制。默认情况下，如果...
简单实现jQuery弹窗效果
10-19
在本教程中，我们将探讨如何使用jQuery来实现一个简单的弹窗效果。首先，我们要了解jQuery是一个流行的JavaScript库，它提供了一种简洁的方式来处理DOM操作、事件处理和动画效果。在这个例子中，我们将学习如何利用...
javascript实现蒙版与禁止页面滚动
10-15
JavaScript 实现蒙版和禁止页面滚动是网页交互中常见的需求，尤其在移动设备和桌面端混合使用时。本文将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先，我们需要一个包含内容的容器（例如 `.container`...
jQuery设置遮罩层下内容位置不跳动且不可滚动
大桶爆米花eee
11-29 703
发现在设置遮罩层底部position为fixed时，默认会回到最顶部，所以对代码进行了修改 如下： var scrollTop $bonus.click(function(){ //开启弹出框时，获取scrollTop的值，设置底部position为fixed，并将值赋给他的top值 scrollTop = document.scrollingElement.scrollTop ...
html5 遮罩层禁止滚动,html滚动穿透问题详解
weixin_32280593的博客
05-31 1498
臭名昭著的前端滚动穿透问题,今天也遇到了,网上找来的大概有三种解决方案!1. css之overflow:hiddenhtml, body {overflow: auto;height: 100%;}1234html,body{overflow:auto;height:100%;}当弹出蒙层时，禁用了html和body的滚动条，滚动列表的滚动位置会丢失, 需要使用js来还原,document.scr...
让jquery弹出窗口不被阻挡
风之羽
08-28 2464
以下代码，从服务器端得到一个计算过的URL，然后打开新页面。 $("#btn_ok").click(function() { var entry_id = $("#entry_id").val(); var url= "{% url 'zinnia:entry_reward'%}"; var amount = 5
JQuery弹出菜单时禁止页面（body）滚动
weixin_30788731的博客
11-13 486
最近在做手机端的弹出菜单，但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去，体验非常不好，所以查了一下弹出菜单时禁止页面滚动的方法，整理如下： 方法一：弹出菜单时给body和html添加一个css样式：height:100%;overflow:hidden;弹出层消失再去掉这个类。(只给body添加样式在安卓机上无效果) css代码：.add{height:100%;overflow...
禁止页面Body在后台滚动
weixin_33676492的博客
06-17 230
我最讨厌的一种情况, 是在滚动弹出框的时候, 后台的 <body> 也跟着一起滚了。你可能也碰到过这种情况: 想滚动一下对话框, 却看到底层的页面也跟着一起滚动? 这真是种糟糕的用户体验, 很杯具、呵呵。 那么怎样才算是比较好的处理方式? 监听 scroll 事件并且执行 preventDefault 和/或 stopP...
弹出弹窗后，如何禁止底层的body滚动，适用于超长的页面
热门推荐
凝视深渊
01-04 4万+
常见场景 从event target入手 还是直接干body吧 conclusion 常见场景 在许多填写表单的页面中，都会弹出一个选择器，让你在弹窗中选择项目。有时，弹窗本身容纳不下内容，需要让它不断滚动来展示，但因为事件是冒泡的，有时就会造成底部（body 的Z-index肯定是在下面的 ）的内容也在滚动。这内外一起滚，就有点尴尬了。 举例，下面两张图里，都有类似的问题。那
前端禁止页面滚动
最新发布
weixin_70610368的博客
12-01 693
2.取消页面禁止滚动。
禁用body滚动条的兼容写法
weixin_44283589的博客
04-27 304
注意，这种方法只是禁用了 body 元素的滚动条，而不是禁用整个页面的滚动条。如果需要禁用整个页面的滚动条，可以将上述代码中的 document.body 改为 document.documentElement。在禁用滚动条时，将 position 属性设置为 fixed，并且将 scrollTop 设置为 0，就可以禁用滚动条。在启用滚动条时，将 position 属性和 top 属性设置回原来的值就可以了。
禁止弹窗后面body滑动
越思考越清晰
04-11 7664
知识点：① return false 实际上做了3件事情：event.preventDefault(); //取消事件的默认行为event.stopPropagation(); //阻止事件冒泡停止回调函数执行并立即返回。②preventDefault()  //取消事件的默认事件(事件捕捉)&lt;a href="http://www.baidu.com"&gt;测试&lt;/a&gt; $(...
怎么禁止页面滚动html,jQuery强制禁止页面滚动
weixin_32384503的博客
06-08 1557
HtmlCssJs超实用的jQuery代码段 - jQuery实现强制禁止页面滚动的方法0鼠标移动这里，禁止转动滚轮！鼠标移出这里，开启转动滚轮！window.onload = function() {for (i = 0; i < 50; i++) {var x = document.createElement('div');x.innerHTML = "jQuery";document....
react移动端项目弹窗后禁止滑动
07-12
在React移动端项目中，你可以通过添加CSS样式和使用React组件来禁止滑动。以下是一种常见的方法： ...这样就可以在React移动端项目中实现弹窗后禁止滑动的效果了。记得在修改完配置后重新启动应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值