bootstrap两层模态框无法滚动问题

最新推荐文章于 2022-11-29 15:29:37 发布
最新推荐文章于 2022-11-29 15:29:37 发布
阅读量1.4k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BigHippos/article/details/88552456
版权

因为有 overflow-y:auto，所以模态框才可以滚动，而当关闭任何一个模态框时，body 元素的 css 规则 modal-open 会被移除掉，自然 overflow-y:auto 也就没有了，所以模态框的滚动条就消失了。

<div class="modal fade" ... style="overflow: auto">

 

校长2008
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现类bootstrap模态框动画
12-11
首先，模态框通常由两部分组成：一个全屏的遮罩层和一个包含具体内容的对话框。遮罩层用于阻止用户与背景内容的交互，对话框则包含标题、关闭按钮、主体内容以及可能的确认或取消按钮。在布局上，遮罩层需要覆盖整个...
关闭第一层模态框后第二层模态框无法滚动
qq_24140481的博客
09-03 424
1. 问题描述 两个模态框同时显示在页面中，当希望关闭上一层模态框A，保留下一层模态框B时，出现的下一层模态框B不能上下滚动的问题。 2. 什么情况下问题出现? 我写的页面使用了 Bootstrap 模态框Modal， 这个模态框B显示的同时又弹出了另一个模态框A。 第二个模态框A使用了 bootbox的prompt 弹窗， 同理如果同时显示的是另一个模态框也会有同样的问题。 3. 问题分析 当我们显示模态框是会发现body上被添加了一个类，名为“modal-open”. 这个类会帮助浏览器了解到我们现在的
bootstrap实现多模态框的方法
热门推荐
全赞功成湿的博客
05-13 1万+
本文描述了bootstrap模态框用来做多模态框的问题，解决并实现了bootstrap多模态框。
Bootstrap多模态框无法点击滑动解决方案
HelloWorld, GraspWorld!
01-29 647
多模态框，先前模态框无法滑动 增加以下语句即可解决 // 覆盖Modal.prototype的hideModal方法 $.fn.modal.Constructor.prototype.hideModal = function () { var that = this this.$element.hide() this.backdrop(function () { ...
使用bootstrap的模拟框后，页面无法滚动
菜菜鸟的博客
08-31 1083
1. 原因 bootstrap中如果在模态框弹出模态框，即多重模态框，那么在关闭模态框后，上一级的模态框无法滚动，而且滚动事件会穿透到body层。原理是只要有modal被打开，body会被赋予modal-open这个类，使其overflow变为hidden，无法滚动； 2.解决办法 将body的model-open样式移除即可 ps:你们的点赞是我写文章的动力 ...
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
08-31
然而，这种多模态对话框的使用可能会引发一系列问题，其中包括滚动条遮罩阴影问题。当多个Modal弹窗重叠时，滚动条可能会被错误地隐藏或者遮罩层（modal-backdrop）不正确地显示，导致用户体验下降。 **问题分析** ...
bootstrap响应式模板
12-05
2. 组件丰富：Bootstrap提供了诸如导航栏、按钮、下拉菜单、表单、模态框、图像轮播、警告提示等多种预定义的UI组件，方便快速构建功能丰富的网页。 3. 自定义：Bootstrap允许开发者通过Sass（预处理器）和Less...
用bootstrap3+javascript实现个人响应式网站
04-03
在Bootstrap3中，许多组件如模态框（Modal）、下拉菜单（Dropdown）和轮播图（Carousel）都依赖于JavaScript插件。通过编写或调用这些插件，我们可以实现页面上的动态行为，如点击按钮显示隐藏内容，或者滚动到页面...
bootstrap-4.0.0-beta.3-dist
01-12
`bootstrap.min.js`是Bootstrap的核心JavaScript功能，包括模态框、下拉菜单、滚动spy等功能。而`popper.min.js`是Bootstrap 4引入的新依赖，用于处理定位，比如在创建弹出层时进行更精确的布局计算。 3. **核心...
点击Bootstrap的popover自动回滚置顶问题
bacao3271的博客
09-05 351
在a链接中使用popover，当a链接处于窗口需下拉滚动条的位置时，点击popover后内容自动往上滚至顶部。 <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" da...
Bootstrap中模态框多层嵌套时滚动条问题
qq_39726798的博客
01-07 564
现象： 两层模态框，在上层模态框隐藏后，底层模态框无法滚动 原因： 模态框在打开的时候，会隐藏掉父标签的滚动条，关闭的时候会恢复回去，把滚动条加到父标签，所以，有两层模态框的时候，上层关闭时，一般会把滚动条加回body，导致底层模态框无法滚动 解决办法： 在顶层模态框隐藏时，继续隐藏body的滚动条
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 4055
popper-append-to-body 属性是 Element-ui 官方文档中提供的一个属性，该属性的用途: 就是将 el-select 选项的内容移动 div#app 当中，默认值是 true;当页面滚动的时候，el-select的内容跟随页面移动，不是跟随el-select下面的input进行移动，想要实现的效果如下图。important 为所有样式的最高级，可以通过外联的样式来个更改el-select本身自带的样式。模态框中的el-select下拉框不跟随页面滚动问题。
基于python实现的聊天室（客户端：二）tkinter的美化ttkbootstrap的滚动文本框ScrollText自动滚动到底部
m0_61143764的博客
04-02 5070
ScrollText自动滚动到底部
Bootstrap中，模态框嵌套模态框时，关闭第二个模态框时，导致第一个模态框的滚动条消失
u010869235的博客
05-09 5063
问题：在使用Bootstrap时，有时候会用到模态框中再嵌套模态框。这样就会出现一个问题，就是在关闭第二个模态框时，会导致第一个模态框的滚动条消失，这样就会使得屏幕太小而模态框太大看不到底部信息，而没法进行操作。 解决方法：就是在第二个模态框的关闭hide 方法调用之后立即触发的事件中,设置第一个模态框的样式,给其加一个样式:'overflow-y':'scroll'。 代码如下: myMod
在bootstrap中多层modal叠加导致页面无法滚动的问题
weixin_33997389的博客
08-15 743
为什么80%的码农都做不了架构师？>>> ...
bootstrap3模态框关闭滚动条
最新发布
06-07
要关闭Bootstrap 3模态框后面的滚动条，可以通过以下CSS样式来实现： ```css .modal-open { overflow: hidden; } ``` 将上面的代码添加到你的CSS文件中，或者将其添加到页面的`<style>`标签中即可。这将防止模态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值