使用bootstrap的模拟框后，页面无法滚动

最新推荐文章于 2022-09-15 10:26:56 发布
最新推荐文章于 2022-09-15 10:26:56 发布
阅读量1k 收藏
点赞数 2
分类专栏： bootstrap 文章标签： bootstrap模拟框 页面无法滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41217541/article/details/100174637
版权

1. 原因

bootstrap中如果在模态框弹出模态框，即多重模态框，那么在关闭模态框后，上一级的模态框无法滚动，而且滚动事件会穿透到body层。原理是只要有modal被打开，body会被赋予modal-open这个类，使其overflow变为hidden，无法滚动；

2.解决办法

将body的model-open样式移除即可

ps:你们的点赞是我写文章的动力

丢失的林夕
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决bootstrap框架多层不受鼠标滚轮控制并且关闭之后body叠加padding-right解决方案
Technology_liu的博客
04-29 797
我在做我哦的毕业设计时出现了一个问题，就是第一层摸态框消失并且第二层摸态框显示就会出现modal不受鼠标滚轮控制并且关闭之后body就会padding-right叠加，那样整个页面效果不是非常好，那么怎么解决了，首先，如果第一个摸态框有button按钮，那么点击按钮时就是用延时器，在body上赋予“modal-body”类，代码如下： function btn_register() { ...
bootstrap两层模态框无法滚动问题
记录
12-06 2795
bootstrap-modal
Boostrap 模态框无法滚动
weixin_58425109的博客
09-15 244
当已经打开一个一级模态框之后，再继续打开一个二级模态框， 然后关闭二级模态框，一级模态框长度大于视窗的时候，会导致一级模态框无法向下滚动。当二级模态框关闭的时候，会移除body标签上的modal-open 类名。在调用关闭点击事件后，手动给body添加上modal-open类名。此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
Bootstrap中模态框多层嵌套时滚动条问题
weixin_33766805的博客
02-21 244
在使用Bootstrap中模态框过程中，如果出现多层嵌套的时候，如打开模态框A，然后在A中打开模态框B，在关闭B之后，如果A的内容比较多，滚动条会消失，而变为Body的滚动条，这是由于模态框自带的遮罩的问题。网上有朋友给出的解决方案是在A增加overflow:auto的方法解决，但是这种方法会使得页面出现两个滚动条。 鉴于上述已经了解到原因是由于遮罩造成的，那么可以重新增加遮罩，即在关闭B之后，...
bootstrap 多层modal关闭底层modal滚动条失效问题
u011544437的专栏
09-11 1285
bootstrap 多层modal关闭底层modal滚动条失效问题 原文地址：https://www.iteye.com/blog/oedy-2376519 bootstrap中如果在模态框弹出模态框，即多重模态框，那么在关闭模态框后，上一级的模态框无法滚动，而且滚动事件会穿透到body层。 原理是只要有modal被打开，body会被赋予modal-open这个类，使其overflow...
在bootstrap中多层modal叠加导致页面无法滚动的问题
weixin_33997389的博客
08-15 755
为什么80%的码农都做不了架构师？>>> ...
简单的ios应用页面展示bootstrap模板
06-05
此外，Bootstrap还包含许多内置的UI组件，如导航条（navbar）、按钮（buttons）、表单（forms）、卡片（cards）和模态框（modals），这些都是构建iOS应用风格页面时常见的元素。比如，我们可以用导航条来模拟iOS应用...
bootstrap实现视觉滚动差效果主页
05-12
Bootstrap框架本身并不直接支持视差滚动，但可以通过结合使用jQuery库（如提供的`jQuery-dygd20151229.js`文件）和其他插件来实现这一效果。 一个常见的插件是`jQuery.scrollify`，它可以帮助我们轻松地实现视差...
js实现类bootstrap模态框动画
12-11
在布局上，遮罩层需要覆盖整个屏幕，且在模态框显示时阻止页面滚动。对话框则应水平居中显示，垂直位置根据设计需求调整。动画效果通常包括渐显和从顶部滑下的动态呈现。 实现模态框的动画，首先需要设置遮罩层。...
基于html和bootstrap框架的后台模板集合
02-18
2. **预定义组件**：模板可能包含Bootstrap的各种组件，如导航栏、按钮、表单控件、模态框、下拉菜单等。这些组件已经预设了样式，可以直接使用，大大减少了开发时间。 3. **定制化**：虽然模板提供了现成的设计，...
Bootstrap V3 中文网 离线页面
05-28
这个离线页面包含了完整的Bootstrap V3 API和指南，帮助开发者理解和使用这个强大的工具。 在压缩包中，主要文件名为"bootcss_API"，这可能是一个HTML文件或者包含了多个文件的目录，用于模拟在线网站的结构和内容...
bootstrap-datetimepicker 滚动错位问题
aigu1989的博客
04-28 602
问题：在页面上弹出控件的时候，滚动后面页面，时间控件就会错位。 解决方法1： 搜索bootstrap-datetimepicker.js里面的"show:"方法，在this.place()方法后面添加以下代码： $(window).on('mousewheel', $.proxy(this.place, this)); 然后搜索"top = top"，在place：方...
bootstrap里模态框调用后禁止页面滚动
qq_42345237的博客
01-06 1124
首先我们需要判断模态框是否已经被调用，这里使用bootstrap里提供的方法： // 监听点击事件，来触发页面是否滚动 // 定义两个函数，来禁止滚动和释放页面滚动 $('.modal').on('show.bs.modal', function(e) { stopScroll(); }) $('.modal').on('hidden.bs.modal', function(e) { ...
Bootstrap多模态框无法点击滑动解决方案
HelloWorld, GraspWorld!
01-29 652
多模态框，先前模态框无法滑动 增加以下语句即可解决 // 覆盖Modal.prototype的hideModal方法 $.fn.modal.Constructor.prototype.hideModal = function () { var that = this this.$element.hide() this.backdrop(function () { ...
bug：移动端弹出bootstrap模态框时，禁止body上下滚动
yaya07755的专栏
10-15 478
1、存在问题： 点下面图一的视频轮播，弹出bootstrap模态框如图二，滚动鼠标时，模态框遮罩下面的body也随着上下滚动的问题 图一 图二2、解决办法： html： <!-- Swiper:视频 --> <div class="vedio"> <div c...
boostrap 鼠标滚轮滑动图片_BootStrap布局鼠标滚动失效问题
weixin_42511121的博客
01-17 322
记录最近在项目中遇到的一个奇葩bug情景用bootstrap布局后插入某些元素会导致鼠标滚轮失效 进度条正常 就是鼠标控制不了!function () {var EventUtil = {addHandler: function (element, type, handler) {if (element.addEventListener) {element.addEventListener(typ...
【Web】Bootstrap框架学习笔记之 modal模态框在ios苹果手机上失灵（ Debug 日记）
LittleFiveSmile的博客
08-16 907
在浏览器点最下面的delete按钮会弹出弹框，但是在苹果手机上失灵了 我原本是这样写的 <div class="btn btn-danger" data-toggle="modal" data-target="#delete" > Delete </div> <div class="modal fade" id="delete" tabindex="-...
uuidgen.exe
最新发布
08-29
Windows 8 SDK 此 SDK 于 2012 年 11 月发布，可用于创建适用于 Windows 8 或更早版本的 Windows 应用 () 使用 Web 技术、本机和托管代码;或使用本机或托管编程模型的桌面应用。
thymeleaf+bootstrap前端框架页面模板
01-31
当我们需要在Java应用程序中使用Bootstrap前端框架时，可以使用Thymeleaf来为页面提供模板。 Thymeleaf提供了一种将数据动态渲染到HTML模板中的方式。我们可以在Thymeleaf模板中使用Bootstrap提供的CSS和JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值