bootstrap多层modal弹窗同时关闭的解决办法

最新推荐文章于 2023-11-01 15:59:04 发布

原创最新推荐文章于 2023-11-01 15:59:04 发布 · 8.2k 阅读

3 ·

CC 4.0 BY-SA版权

Javascript 同时被 3 个专栏收录

1 篇文章

订阅专栏

Web

1 篇文章

订阅专栏

Bootstrap

1 篇文章

订阅专栏

本文介绍了一个关于Bootstrap多层Modal弹窗的问题及其解决方案。当子Modal关闭时，会错误地导致所有父Modal一同关闭。通过对源码的修改，确保了只有当前Modal会被关闭，避免了父级Modal误关闭的情况。

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

bootstrap多层modal弹窗时。当子窗口关闭时，所有父窗口一起关闭。

原因是bootstrap在窗口关闭事件委托时，委托给所有窗口。

如源码：

this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

改进为

this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:first', $.proxy(this.hide, this))
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:last', $.proxy(this.hide, this))

这样在多层窗口关闭时只会关闭自窗口，不再关闭父窗口

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DangerChanger

关注关注

1
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Bootstrap 弹出框

csbysj2020

05-19

523

在网页设计中，弹出框（Modal）是一种常见的交互元素，用于在用户点击某个按钮或链接时，显示额外的信息或表单。Bootstrap 提供了一套强大的弹出框组件，使得开发者可以轻松地实现这种功能。本文将详细介绍 Bootstrap 弹出框的用法、特点和注意事项。

Bootstrap模态框（modal）多层叠加弹出、模态框样式效果设置等问题处理（持续更新帖）

Vinnie.Wu的博客

08-03

3265

在bootstrap框架使用过程中，模态框可能是最为常用的组件之一。通过弹出模态框，可以满足多种会话应用层场景，使得业务流程更加合理和人性化。今天对模态框常用的两个小功能做下记录，分别为多模态框弹出顺序设置和模态框弹出窗体可拖动设置。一、多弹出框顺序设置在一个场景内，可能需要弹出两个或者更多模态框，而每个模态框的弹出需要一定的逻辑顺序，这个时候要求我们合理设置弹出顺。 解决办法：最简单的处理办法就是将多个模态框的div在页面上设置相应的顺序（自上而下的排列顺序皆可），越往下排序，则弹出优先级越高（

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

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

web_Rookie的博客

06-02

752

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

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

u011544437的专栏

09-11

1388

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

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

FineDust的博客

02-20

756

boootstrap多层modal弹窗问题

Bootstrap中，模态框嵌套模态框时，关闭第二个模态框时，导致第一个模态框的滚动条消失

u010869235的博客

05-09

5127

问题：在使用Bootstrap时，有时候会用到模态框中再嵌套模态框。这样就会出现一个问题，就是在关闭第二个模态框时，会导致第一个模态框的滚动条消失，这样就会使得屏幕太小而模态框太大看不到底部信息，而没法进行操作。解决方法：就是在第二个模态框的关闭hide 方法调用之后立即触发的事件中,设置第一个模态框的样式,给其加一个样式:'overflow-y':'scroll'。代码如下: myMod

关于Bootstrap的modal开启和关闭事件只被调用一次的问题

wodeshouji6的博客

03-15

1646

具体问题： Bootstrap的modal（模态框）打开和关闭事件只被调用一次，之后便会直接从缓存中加载。但这无法满足某些场景，例如，连续点开同一个视频，都从头开始，而modal会从上次播放的地方继续。 player_modal对应的模态框的打开事件。注意，这里使用的live，而不是on，如果使用on，则只会执行一次。 var setuped = false; $('#player_...

Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案

12-12

针对‘Bootstrap modal 多弹窗之叠加显示不出弹窗问题’说一下自己的解决办法。当然还是官方提出的‘最好不要多个modal叠加很容易出现很难解决的前端组件问题’ 示例代码: <div class='bs-example-modal-lg fade ...

Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法

08-31

然而，在处理多层模态框（多弹窗叠加）时，可能会遇到一些问题，比如在关闭所有模态框后，背景的阴影遮罩层（modal-backdrop）仍然存在的问题。这个问题不仅影响用户体验，也可能导致界面交互出现异常。问题的根源...

bootstrap多个模态框关闭问题

luckydog

05-21

4372

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

BootStrap嵌套模态框关闭

u013204622的博客

03-08

2518

** 先说点废话有时业务需要在模态框上继续打开模态框，但是子模态框关闭会导致父级也同时关闭 ** Bootstrap自带的模态窗口关闭写法是 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&

Bootstrap模态框的关闭

gyueh的博客

11-23

1712

目的：点击取消按钮时关闭模态框代码如下： <button type="submit" >发送</button> <button type="button" data-dismiss="modal">取消</button> 给button按钮加data-dismiss="modal"后，点击取消按钮可以关闭模态框 ...

bootstrap中多个modal之间的切换

yixu0534的博客

08-04

8085

1、两个弹出modal的按钮，点击登录弹出登录的modal，点击注册弹出注册的modal 登录注册 2、两个modal 没有账号，点击注册获取验证码我已阅读并同意相关用户协议账号登录

JS组件Bootstrap实现弹出框和提示框效果代码

weixin_30462049的博客

06-08

689

JS组件Bootstrap实现弹出框和提示框效果代码作者：懒得安分字体：[增加减小] 类型：转载时间：2015-12-08 我要评论这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码，对弹出框和提示框感兴趣的小伙伴们可以参考一下前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两...

bootstrap 双层模态窗关闭问题

JAVA开发老菜鸟的专栏

05-21

442

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

关于bootstrap的modal弹出层嵌套子Modal所引发的血案

iteye_20240的博客

07-04

929

bootstrap的弹出层嵌套有一个问题，当子modal关闭时父的modal也会自动关闭，这可能是bootstrap的一个问题，经过资料仔细查找，发现需要修改bootstrap.js的源码，需要找到这一行 this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, thi...

bug 随记 —— data-dismiss=“modal“