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

最新推荐文章于 2022-11-29 15:29:37 发布
原创 最新推荐文章于 2022-11-29 15:29:37 发布 · 1.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解析了模态框中滚动条的显示与隐藏机制，阐述了overflow-y:auto属性如何使模态框具备滚动功能，并解释了在关闭模态框时，body元素的modal-open规则被移除，导致滚动条消失的过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

 

校长2008
关注
Bootstrap 模态框(Modal)深度解析：7种高级用法
AI架构全栈开发实战笔记
05-24 1044
Bootstrap模态框的基础用法（如通过触发、基础样式配置）在官方文档中已有详细说明，但实际开发中我们常遇到更复杂的需求：动态生成模态内容、多层嵌套模态、与表单验证深度集成、自定义动画效果等。本文将聚焦这些「官方文档没说透」的场景，结合源码级解析和实战案例，帮你掌握模态框的「进阶生存技能」。本文将按照「原理拆解→高级用法→实战案例→避坑指南」的逻辑展开：首先用「快递柜取件」的生活案例类比模态框工作原理；然后通过7个具体场景（动态创建、嵌套模态等）讲解高级用法，每个场景包含代码示例和底层逻辑分析；
Bootstrap模态框（modal）多层叠加弹出、模态框样式效果设置等问题处理（持续更新帖）
Vinnie.Wu的博客
08-03 3260
在bootstrap框架使用过程中，模态框可能是最为常用的组件之一。通过弹出模态框，可以满足多种会话应用层场景，使得业务流程更加合理和人性化。今天对模态框常用的两个小功能做下记录，分别为多模态框弹出顺序设置和模态框弹出窗体可拖动设置。 一、多弹出框顺序设置 在一个场景内，可能需要弹出两个或者更多模态框，而每个模态框的弹出需要一定的逻辑顺序，这个时候要求我们合理设置弹出顺。 解决办法：最简单的处理办法就是将多个模态框的div在页面上设置相应的顺序（自上而下的排列顺序皆可），越往下排序，则弹出优先级越高（
使用bootstrap的模拟框后，页面无法滚动
菜菜鸟的博客
08-31 1156
1. 原因 bootstrap中如果在模态框弹出模态框，即多重模态框，那么在关闭模态框后，上一级的模态框无法滚动，而且滚动事件会穿透到body层。原理是只要有modal被打开，body会被赋予modal-open这个类，使其overflow变为hidden，无法滚动； 2.解决办法 将body的model-open样式移除即可 ps:你们的点赞是我写文章的动力 ...
Boostrap 模态框无法滚动
weixin_58425109的博客
09-15 300
当已经打开一个一级模态框之后，再继续打开一个二级模态框， 然后关闭二级模态框，一级模态框长度大于视窗的时候，会导致一级模态框无法向下滚动。当二级模态框关闭的时候，会移除body标签上的modal-open 类名。在调用关闭点击事件后，手动给body添加上modal-open类名。此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
模态框直接hide，页面滚动条不显示，无法将页面往下拉
qq_35364545的博客
07-14 721
×                                                            $(document).ready(function() {                     $("#onetwo").on('click', function() {                         $('#myModal').
bootstrap 多层modal关闭底层modal滚动条失效问题
u011544437的专栏
09-11 1386
bootstrap 多层modal关闭底层modal滚动条失效问题 原文地址：https://www.iteye.com/blog/oedy-2376519 bootstrap中如果在模态框弹出模态框，即多重模态框，那么在关闭模态框后，上一级的模态框无法滚动，而且滚动事件会穿透到body层。 原理是只要有modal被打开，body会被赋予modal-open这个类，使其overflow...
js实现类bootstrap模态框动画
12-11
首先，模态框通常由两部分组成：一个全屏的遮罩层和一个包含具体内容的对话框。遮罩层用于阻止用户与背景内容的交互，对话框则包含标题、关闭按钮、主体内容以及可能的确认或取消按钮。在布局上，遮罩层需要覆盖整个...
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
08-31
然而，这种多模态对话框的使用可能会引发一系列问题，其中包括滚动条遮罩阴影问题。当多个Modal弹窗重叠时，滚动条可能会被错误地隐藏或者遮罩层（modal-backdrop）不正确地显示，导致用户体验下降。 **问题分析** ...
Bootstrap模态框无法调用问题的解决办法
冰零0o的博客
04-26 1万+
本人最近刚学习Bootstrap，感觉它很强大，而且容易上手。但在使用模态框时，确遇到了问题。模态框无法调用，官网上的实例使用了多个，而且不管是按钮还是js都无法调用。上网搜了很多办法都不行，代码也检查了好几遍。后来发现在页面引入Bootstrap和jQuery文件顺序上有些不同。后来一想，Bootstrap依赖jQuery，于是我抱着试一试的心态调整了引用顺序。终于这该死的问题顺利解决了！！！...
Bootstrap多模态框无法点击滑动解决方案
HelloWorld, GraspWorld!
01-29 716
多模态框，先前模态框无法滑动 增加以下语句即可解决 // 覆盖Modal.prototype的hideModal方法 $.fn.modal.Constructor.prototype.hideModal = function () { var that = this this.$element.hide() this.backdrop(function () { ...
关闭第一层模态框后第二层模态框无法滚动
qq_24140481的博客
09-03 527
1. 问题描述 两个模态框同时显示在页面中，当希望关闭上一层模态框A，保留下一层模态框B时，出现的下一层模态框B不能上下滚动的问题。 2. 什么情况下问题出现? 我写的页面使用了 Bootstrap 模态框Modal， 这个模态框B显示的同时又弹出了另一个模态框A。 第二个模态框A使用了 bootbox的prompt 弹窗， 同理如果同时显示的是另一个模态框也会有同样的问题。 3. 问题分析 当我们显示模态框是会发现body上被添加了一个类，名为“modal-open”. 这个类会帮助浏览器了解到我们现在的
bootstrap实现多模态框的方法
热门推荐
全赞功成湿的博客
05-13 1万+
本文描述了bootstrap模态框用来做多模态框的问题，解决并实现了bootstrap多模态框。
点击Bootstrap的popover自动回滚置顶问题
bacao3271的博客
09-05 398
在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 642
现象： 两层模态框，在上层模态框隐藏后，底层模态框无法滚动 原因： 模态框在打开的时候，会隐藏掉父标签的滚动条，关闭的时候会恢复回去，把滚动条加到父标签，所以，有两层模态框的时候，上层关闭时，一般会把滚动条加回body，导致底层模态框无法滚动 解决办法： 在顶层模态框隐藏时，继续隐藏body的滚动条
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 4538
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 5350
ScrollText自动滚动到底部
Bootstrap3modal嵌套|模态框嵌套滚动条bug
lbj23lbj的博客
11-03 2583
Bootstrap3modal嵌套|模态框嵌套滚动条bug说明模态框嵌套虽说很实用，功能更加完善，但是官方的说明是不支持嵌套的。bug收集滚动条当同时出现两个modal时，新出现的modal隐藏后，第一个出现的modal变成不能上下滑动了。 用hack的方法暂时解决：<style> .modal { overflow: auto} </style> google还有很多解决
掌握Bootstrap框架：响应式web前端设计与示例解析
3. **JavaScript插件**：除了CSS组件外，Bootstrap还包含了一套JavaScript插件，包括模态框（Modals）、下拉菜单（Dropdowns）、滚动条监听（Scrollspy）、警告弹窗（Toasts）、工具提示（Tooltips）等。这些插件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值