bootstrap多层modal弹窗关闭失效问题

最新推荐文章于 2026-06-25 09:19:12 发布

原创最新推荐文章于 2026-06-25 09:19:12 发布 · 822 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

boootstrap

当前文章被收录于：

boootstrap

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

当多个Modal层在页面上弹出并关闭时，可能会遇到body的modal-open样式被自动移除的情况。为了解决这个问题，可以在隐藏Modal的事件处理中，如hidden.bs.modal时，使用JavaScript手动添加modal-open样式到body元素上，确保样式保持正确。

原因

当前body页面弹出多层modal窗口，关闭modal时，body页面moadl-open样式会remove

解决方案

模板hidden.bs.modal时，添加样式

$("body").addClass("modal-open");

标签

#bootstrap #前端 #javascript

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Narrat

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

bootstrap5-模态框关闭问题

陆沙的博客

11-05

729

boostrap modal close

参与评论您还未登录，请先登录后发表或查看评论

Bootstrap模态框modal使用注意（关闭modal有遮罩框（黑框）、调用.modal(‘show‘)第一次有效，第二次无效解决方法、以及解绑modal框绑定的方法）

munangs的博客

10-27

2812

Bootstrap模态框modal使用注意（关闭modal有遮罩框（黑框）、调用.modal('show')第一次有效，第二次无效解决方法、以及解绑modal框绑定的方法）

bootstrap多个模态框关闭问题

luckydog

05-21

4425

项目中使用模态框的时候会关闭所有解决方法 jQuery(function($){ //解决模态框背景色越来越深的问题 $(document).on('show.bs.modal', '.modal', function(event) { $(this).appendTo($('body')); }).on('shown.bs...

bootstrap的模态框show.bs.modal、hidden.bs.modal函数重复触发的

raobo0917的博客

04-26

2077

原代码片段： function showServerInfo(recordId) { $("#showFeeWhitherModal").on('hidden.bs.modal', function (e) { $(this).find('.modal-body').html(' 等待结果，请稍后...'); $(this).removeData('bs.modal'); }).on('show.bs.modal',

BootStrap弹出框实现自动关闭（延时）

小绵杨

11-22

7669

需求最近使用bootstrap时，需要一个弹窗提示用户登录失败。bootstrap提供了alert组件来满足弹窗提示的功能，但是没有自动关闭功能，只提供了一个可以通过点击’ x '号关闭的弹窗。详情：bootstrap警告框。这样对用户并不太友好，例如elementui中的弹框，显示一段时间后自动消失。起到了提示作用即可。实现利用window.setTimeout 延时一定时间后，再关闭弹框。为弹框添加’ hide ‘类，即默认隐藏。当需要显示时，再添加’ show ‘类，显示弹框。延时一段时间

bootstrap 多层modal关闭底层modal滚动条失效问题

u011544437的专栏

09-11

1467

bootstrap 多层modal关闭底层modal滚动条失效问题原文地址：https://www.iteye.com/blog/oedy-2376519 bootstrap中如果在模态框弹出模态框，即多重模态框，那么在关闭模态框后，上一级的模态框无法滚动，而且滚动事件会穿透到body层。原理是只要有modal被打开，body会被赋予modal-open这个类，使其overflow...

Bootstrap-多层模态框滚动条失效解决办法

chunqinhang3723的博客

05-04

838

Bootstrap-多层模态框滚动条失效解决办法 Bootstrap官方不支持模态框多层叠加，实际项目使用时需要弹出两层弹出层，当弹出第一个弹出层时，滚动条正常，弹出第二个弹出框并关闭时，滚动条事件被吃掉覆盖。主要原因是因为遮罩问题引起的，最简单的解决办法就是在第二个弹窗关闭事件时给body重...

在bootstrap中多层modal叠加导致页面无法滚动的问题

weixin_33997389的博客

08-15

841

为什么80%的码农都做不了架构师？>>> ...

bootstrap实用样式函数

qq_29539827的博客

12-01

594

bootstrap的样式是整块的，有时候想要实现一点个性化的样式又很消耗时间。本文记录一些曾经用过的bootstrap样式，忘记了还能找回来。。。功能目录清单： 1.设置表头对齐方式 2.设置表数据行对齐方式 3.设置表某一列的对齐方式 1.设置表头对齐方式定义全局表格样式如下 <style> .table thead>tr>th { text-align: center; } </style> 2.设置表数据行对齐方式定

Web UI测试实战：14个易忽略测试点与自查清单

最新发布

weixin_30772105的博客

06-25

319

UI测试是确保Web应用用户体验的关键环节，其核心在于验证界面与用户交互的完整生命周期。从技术原理看，它覆盖视觉呈现、交互逻辑、数据状态与前端性能四个维度，通过系统性的验证保障产品的可用性与稳定性。在工程实践中，UI测试的价值在于提前发现并修复影响用户体验的缺陷，降低线上问题发生率，尤其在表单交互、内容展示、动态组件等高频场景中作用显著。本文将聚焦于Web UI测试中容易被忽略的14个关键测试点，例如表单的动态校验、下拉框的完整生命周期、响应式图片处理、弹窗的焦点管理以及深色模式适配等，并提供一份实用的自查

bootstrap的modal 无法关闭（event事件未绑定上）

weixin_45506583的博客

11-20

1973

bootstrap的modal 无法关闭（event事件未绑定上）

bootstrap 双层模态窗关闭问题

JAVA开发老菜鸟的专栏

05-21

523

一、页面概况二、问题点点击modal “关闭”按钮后，父modal“关闭”按钮失效点击modal 右上角“X”后，父modal会一同关闭三、解决方法重写子modal的hide 触发事件 hide.bs.modal // modal所在的html 的<body>标签前面加上 $(function(){ $('#myModal').on('hide.bs.moda...

bootstrap modal 点击按钮modal无反应不弹出

qq_35976548的博客

12-29

4817

Bootstrap Modal无法弹出

Bootstrap 弹框：属性控制显示与隐藏

听海边涛声

07-10

1032

Bootstrap 弹框：属性控制显示与隐藏

bootstrap 解决弹出窗口(modal) 常见问题

weixin_30653023的博客

06-26

1062

无法使用键盘esc关闭窗口方法：首先在modal容器的div中增加属性tabindex="-1"，其次设置键盘ESC属性keyboard为true；方法1：使用js打开窗口时 $(“#modal”).modal({keyboard:true}) 方法2：使用H5属性在modal窗口的div中增加data-keyboard=”true”；点击弹出框（modal）外空白处...

bootstrap下Ajax结束后关闭模态框

雪华杉的博客

02-16

785

我希望在点击提交后，发起Ajax请求，在请求到正确结果后提示操作成功并关闭此模态框

python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件

qq_27371025的博客

02-25

2643

前言 Bootstrap 模态框 (modal) 在关闭时，如何触发一些事件?比如重置表单，或者重置表单的校验。 Bootstrap 模态框 (modal) 提供了4个显示和隐藏模态框的事件。这些事件可在函数中当钩子使用。 modal 事件下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。事件描述实例 show.bs.modal 在调用 show 方法后触发。 $(’#identifier’).on(‘show.bs.modal’, function () {// 执行一些

bootstrap的 modal禁用空白关闭事件

weixin_42231823的博客

04-23

557

backdrop 为 static 时，点击模态对话框的外部区域不会将其关闭。keyboard 为 false 时，按下 Esc 键不会关闭 Modal。在使用bootstrap的 modal 时候,在弹出的modal 后，点击空白处时 modal也关闭了。进行关闭，那么这样就会导致点击空白处modal也关闭了。

Bootstrap 5 保姆级教程（十二）：弹出框 & 消息弹窗

Flag少侠的博客

04-21

3838

通过向元素添加 data-bs-toggle="popover" 来来创建弹出框。弹出框要写在 JavaScript 的初始化代码里。

Bootstrap中警告框的弹出与关闭

qq_33729083的博客

11-25

603

警告框的应用场景如下：前台请求后台数据，当后台返回错误信息时，弹出警告框。代码如下： × 这里是错误信息此时警告框是默认隐藏的，要想显示的话，把div的“hide”类去掉，加上“in”即可，代码如下： $('.alert-danger').removeClass('hide').addClass('in') ...