Bootstrap 中的model 组件-------多个弹窗覆盖关闭问题

最新推荐文章于 2026-07-01 12:11:02 发布
原创 最新推荐文章于 2026-07-01 12:11:02 发布 · 823 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
博客讲述了使用Bootstrap的model组件时遇到的弹窗问题。点击按钮A弹出弹窗B，B中再点击弹出弹窗C，关闭C时直接返回页面而非B。解决办法是关闭C时再次打开B，但存在页面数据渲染更新不执行的问题，最终通过添加属性字段判断是否首次点击来解决。

1.碰到一个问题，因为用的 Bootstrap 中的model 组件，弹窗显示

  • 1.如果第一次点击页面按钮A，弹出 弹窗B，在B中再点击按钮，弹出弹窗C，这时B弹窗会被关闭，当关闭C时(或保存、确定、取消)，都会直接返回了页面而非是上一个弹窗B页面。
  • ​ 2.解决的方案是当关闭C时，再次执行打开B弹窗，但是会有一个问题，页面数据的渲染更新可能会不执行
  • ​ 3.例：权限选择，点击B弹窗的按钮，弹出C弹窗权限选择，选择权限后选择确定(根据上条方法再次执行打开B弹窗)，但选中的权限并不会渲染或改变原有的权限，而console.log中数据已经改变。

2.解决：添加一个属性字段，例：num，根据新的属性判断是否是第一次点击，来变换不同的更新

标签
#html5 #javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
01-21
上篇我提到的‘多弹窗之叠加显示不出弹窗问题’ 这里也会遇到一次性关闭所有modal引起阴影遮罩的问题，也就是所有modal都关闭了，但是主页面仍然被阴影遮罩. 这个问题从哪来的，是因为modal叠加，我们点击窗口之外的空白部分，一次性关闭所有model，但是modal自己生成的’.modal-backdrop’只关闭了一个，其余的依然存在， 导致阴影遮罩. 这里的解决办法是 1.第一种禁用modal 点击空白自动关闭的功能。 tempModal.modal({ backdrop:static }) 也就是只能点击关闭按钮，一层一层关闭，避免发生多层关闭的问题。 2.第
Vue Antd控件弹出对话框，父子组件传值
qiulei_21的专栏
11-30 2395
编写vue中，父组件和子组件相互传值以及弹出对话框的代码
bootstrap多层modal弹窗同时关闭的解决办法
Danger Changer 的博客
04-01 8267
bootstrap多层modal弹窗时。当子窗口关闭时，所有父窗口一起关闭。 原因是bootstrap在窗口关闭事件委托时，委托给所有窗口。 如源码： 改进为 这样在多层窗口关闭时只会关闭自窗口，不再关闭父窗口
记录:element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决?【亲测有效】
热门推荐
**My Coding Family**
04-02 2万+
记录:element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决?【亲测有效】
Bootstrap中，模态框嵌套模态框时，关闭第二个模态框时，导致第一个模态框的滚动条消失
u010869235的博客
05-09 5162
问题：在使用Bootstrap时，有时候会用到模态框中再嵌套模态框。这样就会出现一个问题，就是在关闭第二个模态框时，会导致第一个模态框的滚动条消失，这样就会使得屏幕太小而模态框太大看不到底部信息，而没法进行操作。 解决方法：就是在第二个模态框的关闭hide 方法调用之后立即触发的事件中,设置第一个模态框的样式,给其加一个样式:'overflow-y':'scroll'。 代码如下: myMod
全面解析Bootstrap弹窗的实现方法
男神的专栏
02-05 2204
1 . 除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。比如说给一个按钮一个单击事件，然后触发模态弹出窗。除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。2 . 使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括。☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮。
jQuery控制弹窗按钮来关闭model
dreamerzhang66的博客
05-11 1万+
意图在confirm弹窗中<关闭窗口>按钮，点击确定之后关闭model，点击取消，则不会关闭。HTML源码如下：<h1>插件模态框</h1> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal" type="button"
Bootstrap——可拖动模态框(Model)
aiyizou6070的博客
08-07 1472
还是上一个小项目，o(╥﹏╥)o，要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框。网上找了找，发现Bootstrap的Model弹出框可以实现该功能，因此学习了一下，实现了基本弹框功能（可拖动）。 代码如下： <!DOCTYPE html> <html> <head> <me...
Vue项目集成Bootstrap 4的正确姿势：告别jQuery冲突
weixin_34301132的博客
06-20 461
Bootstrap 4 是一套基于 CSS 类名和 jQuery 插件的前端框架，其命令式 DOM 操作机制与 Vue 的声明式响应式系统存在根本性冲突——直接引入 bootstrap.js 会导致 v-model 失效、事件丢失、内存泄漏等问题。核心原理在于 Vue 通过虚拟 DOM Diff 重建真实 DOM，而 Bootstrap 插件依赖静态 DOM 引用和 jQuery 事件绑定，二者运行时环境不兼容。技术价值体现在解耦 UI 表现与状态逻辑，保障可维护性与升级稳定性。典型应用场景包括政企级管理后
BootStrap 模态框禁用空白处点击关闭
weixin_34232744的博客
06-30 249
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。bootstrap的模态框在默认情况下，点击其他空白区域（通常是遮罩层），模态框会被关闭，那么以下方法就是禁止点击其他区域关闭模态框。 $('#myModal').modal({backdrop: 'static', keyboard: fal...
Rails 7+ 集成 Bootstrap 5 实战指南：构建、样式、JS 与部署全链路
weixin_30321449的博客
06-20 311
Bootstrap 是最主流的响应式前端框架，Ruby on Rails 则是久经考验的全栈 Web 开发框架；二者结合本应高效，却因构建工具演进（Sprockets → Webpacker → jsbundling-rails）、CSS/JS 模块化机制差异及运行时环境错配，长期存在集成困难。理解其底层原理——如 SCSS 变量作用域规则、ES Module 初始化时机、Turbo 页面生命周期对组件绑定的影响——是解决 Modal 不弹出、样式不生效、图标变方块等高频问题的关键。本文聚焦 Rails 7
bootstrap模态框 遮挡_Bootstrap Modal遮罩弹出层(完整版)
weixin_39658759的博客
12-18 1138
之前发表过一篇文章叫Bootstrap Modal弹窗代码，其实那个只是一个弹出层代码而已，并不是仿造Bootstrap的，Bootstrap modal是给外层添加固定fixed，然后内容使用自适应靠上居中方式。今天分享的这篇文章正是这种方式。html结构考虑到内容区域需要居中对齐，所以至少要有一个div来定位和显示背景，再用一个div居中内容，内容区域想分成header、body和footer...
bootstrap模态框的详细用法
neos的博客
10-10 1万+
本文介绍了bootstrap中模态框的用法，在文章中我尽量将这一功能说明详细，同时我忽略了部分大部分情况不会使用的属性，也插入一些个人在实际工作中的观点，本文的目标是在你看完本文以后能够较为熟练的使用模态框这一功能，并且不会碰到太多坑。首次写微博，不足之处希望各位看官见谅，如果有大佬看的不爽的也请多多指正，在这里先谢过了。最后如果您喜欢我的文章麻烦点个赞哦。
随机森林原理与生产实践：从Bagging机制到工程落地
weixin_30907935的博客
06-17 472
随机森林是一种基于集成学习的监督学习算法，其核心是Bagging（自助聚合）机制与决策树的结合，通过样本随机采样和特征子集随机选择，有效降低模型方差、提升泛化能力。它不依赖数据标准化，天然容忍缺失值与异常值，具备可解释的特征重要性输出，在金融风控、设备预测、零售销量等工业场景中广泛部署。相比单棵决策树，它以‘去中心化投票’实现鲁棒性；相比深度模型，它以低维护成本和高确定性支撑业务上线。本文深入解析Bootstrap采样、随机特征分裂、OOB评估等关键技术点，并覆盖数据预处理、参数调优、特征解读与线上验证全链
Macaca跨平台移动端自动化测试：一套脚本覆盖iOS与Android实战指南
最新发布
weixin_42529328的博客
07-01 52
自动化测试框架是现代软件工程保障质量与效率的核心实践，其核心原理是通过脚本模拟用户操作，对应用进行系统化验证。在移动互联网领域，随着iOS与Android双端并行的业务需求成为常态，跨平台自动化测试技术应运而生，其技术价值在于能够显著降低多端测试的维护成本与人力投入，实现测试资产复用。这类技术广泛应用于需要保证双端业务一致性的移动应用测试、中小团队快速搭建测试能力以及全栈开发者的自测验证等场景。本文聚焦于Macaca这一解决方案，它通过提供统一的API接口，实现了“一套脚本，多端运行”的理念，有效解决了传统
AI系统中的认知偏差：4种可工程化检测与拦截的思维陷阱
weixin_34038293的博客
06-27 589
认知偏差不是心理学概念，而是AI系统中真实存在的、可量化、可拦截的工程缺陷。当模型在数据采集、特征构建、人机协同或反馈闭环中继承人类决策惯性，就会引发确认偏差、可得性偏差等系统性失准。其技术价值在于将模糊的‘表现变差’归因到具体数据分布异常、标签一致性下降或用户行为日志偏斜等可观测信号；典型应用场景覆盖金融风控误判、电商长尾推荐失效、医疗辅助诊断锚定、保险策略群体误归因等高风险落地环节。本文聚焦工程师可实施的检测指纹与防御机制，如标注一致性热力图、时间分层采样、修正方向不对称性分析等，把认知偏差治理嵌入CI
Appium多设备自动化测试：架构设计与并行化实战指南
weixin_34112181的博客
06-16 495
自动化测试是现代软件工程中保障产品质量的关键环节，其核心原理是通过脚本模拟用户操作，替代重复性人工测试。在移动应用领域，面对碎片化的安卓设备生态，单设备测试难以满足兼容性验证需求。多设备并行自动化测试技术应运而生，它通过调度控制、设备集群和参数化脚本，实现了测试效率的规模化提升。这项技术的核心价值在于将兼容性测试从耗时的手工任务转变为可重复、可扩展的持续集成流程，尤其适用于追求快速迭代和高质量交付的移动开发团队。本文以Appium框架为基础，深入解析如何构建稳定高效的多设备测试体系，涵盖从环境搭建、脚本设计
CSS盒模型深度解析：padding、margin、border与box-sizing原理
weixin_33937499的博客
06-21 399
CSS盒模型是网页布局的底层基石，定义了元素content、padding、border、margin四层空间关系及其尺寸计算逻辑。其核心在于理解不同box-sizing模式（content-box与border-box）如何影响最终渲染宽度，以及padding和margin在布局中的本质差异——前者扩展可点击区域并支撑圆角阴影，后者则因外边距折叠（margin collapse）表现出非线性叠加特性。掌握这些原理，能系统解决元素宽高失控、间距异常、跨浏览器错位等高频问题，并为响应式设计、性能优化（如con
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值