多个Bootstrap Modals（模态框）滚动条问题处理

最新推荐文章于 2022-01-24 23:30:51 发布
最新推荐文章于 2022-01-24 23:30:51 发布
阅读量866 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/cs20160712/blog/1808274
版权

1、模态框（Modal）div位置由上到下，决定第1层，第2层，第3层；

2、然后出现多个Modals（模态框）出现不同的滚动条，影响界面效果；

处理：（1）当前模态框弹出时要控制前一个页面的滚动条隐藏；

          （2）关闭当前模态框时要控制前一个页面的滚动条展开；

 

转载于:https://my.oschina.net/cs20160712/blog/1808274

chuosuikuai8063
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
09-01
Bootstrap框架是目前非常流行的...以上就是对Bootstrap框架中导航条、下拉菜单、轮播广告、栅格系统、标签页和模态框等核心组件的详细解析。理解并熟练掌握这些知识点，可以帮助开发者快速构建美观且响应式的网页应用。
web前端框架(bootstrap)期末作业.zip
最新发布
06-11
5. **JavaScript插件**：除了基本的CSS支持，Bootstrap还提供了基于jQuery的JavaScript插件，如下拉菜单、模态框、滚动条、工具提示(tooltips)和弹出框(popovers)等，为静态的HTML页面添加动态效果。 6. **自定义...
Bootstrap modal 多弹窗之叠加引起的滚动条，遮罩阴影问题
OldLock的专栏
02-27 2077
上篇提到的’ Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题’ 我总结了下，对于modal多窗口叠加引起的遮罩，滚动条，无法弹出窗口的问题，查看源代码，我总结了一种方法可以一次性解决所有这些问题，而不影响原有modal功能，并且实现了多窗口叠加。对于多窗口，如果我们将第二个，乃至第三个，第四个modal的根节点，移植到body下面，就不会出现了以上问题。 具体该如何操作，请看以下代
Bootstrap中模态框多层嵌套时滚动条问题
qq_39726798的博客
01-07 564
现象： 两层模态框，在上层模态框隐藏后，底层模态框无法滚动 原因： 模态框在打开的时候，会隐藏掉父标签的滚动条，关闭的时候会恢复回去，把滚动条加到父标签，所以，有两层模态框的时候，上层关闭时，一般会把滚动条加回body，导致底层模态框无法滚动 解决办法： 在顶层模态框隐藏时，继续隐藏body的滚动条
Bootstrap出现模态框页面抖动且出现滚动条
w5206666的博客
01-24 1373
bootstrap打开模态框时出现页面抖动 1、出现的问题 2、出现问题的原因 3、解决办法 问题 1、在未出现模态框时页面如下（此时页面正常显示）： （因项目未做完，截图只截取一部分，大概知道意思即可） 2、当打开模态框时： ①页面不缩放时页面会向右移动 ②页面缩放会出现滚动条 原因 出现第一种情况①是因为body页面出现了 style="padding-right: 16px;"： 出现第二种情况②是因为出现了.modal-open如下图： 解决办法 修改样式，如下图，可以完美解决！！！！ `
Bootstrap-多层模态框滚动条失效解决办法
chunqinhang3723的博客
05-04 716
Bootstrap-多层模态框滚动条失效解决办法 Bootstrap官方不支持模态框多层叠加，实际项目使用时需要弹出两层弹出层，当弹出第一个弹出层时，滚动条正常，弹出第二个弹出框并关闭时，滚动条事件被吃掉覆盖。主要原因是因为遮罩问题引起的，最简单的解决办法就是在第二个弹窗关闭事件时给body重...
Bootstrap modal 打开多个弹窗关闭后阴影遮罩问题
henghaheibiu的博客
07-22 531
今天碰到这个问题，打开了多个modal，当关闭最后一个modal的时候后面的遮盖层并没有关闭，但是百度了一会，给出的答案都不好用。就自己办法解决一下。直奔正题，打开多个弹框，肯定是有先后顺序的，当打开第一个modal框的时候。给x赋值一个onclick事件，当点击这个事件，关闭所有遮盖层。 $(".close").attr(“onclick”,“closemodal()”); function closemodal(){ $(".modal-backdrop").remove(); } ...
多个modal重叠，导致modal滚动条消失事件
shu580231的博客
03-30 2527
因为最近一直在用modal，modal上再出现modal也是常见的， 但是遇到了一个bug---例如在modal1上弹出一个modal2，关闭modal2之后，会导致modal1滚动条消失，无法滚动。hack：就是在css样式中，增加一个样式：.modal{overflow:auto!important;}原因---弹出新的modal后，会根据当前新的modal内容设置滚动条，关闭这个modal后...
多功能bootstrap响应式简约后台管理模板-Xenon.zip
11-17
组件是Bootstrap的另一个亮点，包括导航条(navigation bars)、模态(modals)、下拉菜单(dropdowns)、按钮(buttons)、表单(forms)、卡片(cards)等。Xenon模板集成了这些组件，使得后台管理界面的功能性和美观性得以...
bootstrap框架
07-28
Bootstrap包含了一系列预设的CSS样式，覆盖了字体、颜色、间距、边框、背景等基本元素，以及按钮、表格、图片、警告框、模态框、导航条、轮播图等多种组件。这些组件都有统一的样式和交互，极大地提高了开发效率和...
Bootstrap4框架酒店预订模板
11-23
Bootstrap4还提供了丰富的组件，如导航条(navigation bar)、按钮(buttons)、表单(forms)、卡片(cards)和模态框(modals)，这些在酒店预订模板中都可能被应用，以提升用户体验。例如，导航条可以方便用户在各个页面间...
bootstrap的模态弹出框modal在有滚动条的页面被隐藏了的解决方法
qq_30908729的博客
10-25 2971
bootstrap的模态弹出框modal在有滚动条的页面被隐藏了的解决方法： 思路就是在模态框弹出之前改变它弹出的位置，具体步骤如下： 下面代码的myModal是弹出框的id，show.bs.modal是bootstrap的东西，整个语句就是给模态框一个绑定事件，在弹出前执行function里面的方法。 注意：$(window)这个对象指的是带有滚动条的页面，如果上一级的页面滚动
Bootstrap Modal 关闭时引起的问题(滚动条和样式残余)
热门推荐
zhongyangjian的专栏
03-11 1万+
我在使用bootstrap3.0时，用了他的modal 功能打开一个模态框时，在关闭modal时，bootstrap没有清除它打开的样式，有余留样式，造成我的页面的滚动条消失了（打开modal前是有滚动条的），代码如下：         ....省略部分代码         $("#setRatioModal").modal("hide");         showRation();/
Bootstrap打开Modal，关闭后滚动条隐藏的解决方案
dihui5317的博客
09-23 784
　　我们在项目中使用bootstrap的modal 功能打开一个模态框（带滚动条），在modal上回继续打开模态框，在关闭第二个模态框的时候会造成第一个模态框滚动条消失，无法看到下面内容。 Html页面如下图所示 　　 　　造成滚动条消失的原因是因为modal关闭的时候清除modal-open样式，所以在关闭modal是调用它的隐藏事件，给body添加modal-open就可以解决...
Bootstrap3modal嵌套|模态框嵌套滚动条bug
lbj23lbj的博客
11-03 2514
Bootstrap3modal嵌套|模态框嵌套滚动条bug说明模态框嵌套虽说很实用，功能更加完善，但是官方的说明是不支持嵌套的。bug收集滚动条当同时出现两个modal时，新出现的modal隐藏后，第一个出现的modal变成不能上下滑动了。 用hack的方法暂时解决：<style> .modal { overflow: auto} </style> google还有很多解决
Modal的显示与隐藏
weixin_41548578的博客
01-19 1809
核心思想 页面完成加载后，为所有含有data-toggle="modal"的元素绑定点击事件 模态框出现的逻辑：先出现遮罩层，再出现模态框 为body增加"modal-open"类，作用是给body增加overflow：hidden隐藏页面的滚动条。给模态框增加overflow-x:hidden;overflow-y:auto美化样式 调用dropback函数，变量shown为true，所以插入...
Bootstrap Modal 加滚动条
gogo忙碌的蚂蚁
09-01 1万+
问题：写模态对话框时，使用Bootstrap 自带的modal样式，滚动条是在遮罩层中，而且模态框的高度是自动的，造成了滚动一直无穷无尽的感觉，界面不是很友好。 方法：在modal-body中设置高度并加上滚动条
ant-vue modal框实现滚动条
neverlandkk的博客
04-09 6970
在vue项目中，使用了ant-vue Ui组件库 需求是在列表展示的时，需要在modal框里遍历未知的多条信息 如果信息过多的话就很很长，效果如下：
浅谈弹窗Modal实现和有滚动条偏移解决方法
yihuliunian的博客
06-29 2075
转载自品略图书馆http://www.pinlue.com/article/2020/03/2010/4610037571703.html 弹窗也叫modal（模态）在网页设计中是一个常见的功能。实现方法也不会太复杂，可以通过css实现居中（bootstrap的modal是使用靠上边距来实现），然后JS控制点击显示和消失。在弹窗中也许你会发现一个问题，就是当页面有滚动条时，点击弹窗可能需要隐藏滚动条，这时内容会变宽，本文来自于江水提供了三种解决方法，收益匪浅，感谢。 弹窗的实现原理和方法 弹...
bootstrap 3 模态框　滚动条
06-03
在 Bootstrap 3 模态框中添加滚动条可以使用以下步骤： 1. 在 CSS 样式中给 `.modal-body` 添加 `max-height` 属性和 `overflow-y` 属性，例如： ```css .modal-body { max-height: 400px; overflow-y: auto; } ``` 2. 将 `max-height` 的值设置成模态框的高度减去标题栏和底部按钮栏的高度，这样可以保证模态框内容超出限定高度时会出现滚动条。 以下是一个示例代码： ```html <div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body" style="max-height: 400px; overflow-y: auto;"> <!-- Modal Body Content --> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> ``` 通过以上方法，你可以在 Bootstrap 3 模态框中添加滚动条，并且可以控制滚动条的最大高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值