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

最新推荐文章于 2024-05-05 08:00:00 发布
最新推荐文章于 2024-05-05 08:00:00 发布
阅读量8k 收藏 3
点赞数 1
分类专栏： Javascript Web Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kallydang/article/details/68944538
版权
Javascript 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
Web
1 篇文章 0 订阅
订阅专栏
Bootstrap
1 篇文章 0 订阅
订阅专栏

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))
这样在多层窗口关闭时只会关闭自窗口，不再关闭父窗口
DangerChanger
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Bootstrap 中的model 组件-------多个弹窗覆盖关闭问题
web_Rookie的博客
06-02 650
1.碰到一个问题，因为用的 Bootstrap 中的model 组件，弹窗显示 1.如果第一次点击页面按钮A，弹出 弹窗B，在B中再点击按钮，弹出弹窗C，这时B弹窗会被关闭，当关闭C时(或保存、确定、取消)，都会直接返回了页面而非是上一个弹窗B页面。 ​ 2.解决的方案是当关闭C时，再次执行打开B弹窗，但是会有一个问题，页面数据的渲染更新可能会不执行 ​ 3.例：权限选择，点击B弹窗的按钮，弹出C弹窗权限选择，选择权限后选择确定(根据上条方法再次执行打开B弹窗)，但选中的权限并不会渲染或改变原有的权限，
bootstrap 多层modal关闭底层modal滚动条失效问题
u011544437的专栏
09-11 1271
bootstrap 多层modal关闭底层modal滚动条失效问题 原文地址：https://www.iteye.com/blog/oedy-2376519 bootstrap中如果在模态框弹出模态框，即多重模态框，那么在关闭模态框后，上一级的模态框无法滚动，而且滚动事件会穿透到body层。 原理是只要有modal被打开，body会被赋予modal-open这个类，使其overflow...
Vue按照顺序实现多级弹窗（附Demo）
最新发布
码农研究僧的博客
05-05 1677
Vue按照顺序实现多级弹窗，以Demo展示，显示整体逻辑
Bootstrap中，模态框嵌套模态框时，关闭第二个模态框时，导致第一个模态框的滚动条消失
u010869235的博客
05-09 5063
问题：在使用Bootstrap时，有时候会用到模态框中再嵌套模态框。这样就会出现一个问题，就是在关闭第二个模态框时，会导致第一个模态框的滚动条消失，这样就会使得屏幕太小而模态框太大看不到底部信息，而没法进行操作。 解决方法：就是在第二个模态框的关闭hide 方法调用之后立即触发的事件中,设置第一个模态框的样式,给其加一个样式:'overflow-y':'scroll'。 代码如下: myMod
关于Bootstrap的modal开启和关闭事件只被调用一次的问题
wodeshouji6的博客
03-15 1548
具体问题： Bootstrap的modal（模态框）打开和关闭事件只被调用一次，之后便会直接从缓存中加载。但这无法满足某些场景，例如，连续点开同一个视频，都从头开始，而modal会从上次播放的地方继续。 player_modal对应的模态框的打开事件。注意，这里使用的live，而不是on，如果使用on，则只会执行一次。 var setuped = false; $('#player_...
bootstrap多个模态框关闭问题
luckydog
05-21 4250
项目中使用模态框的时候会关闭所有 解决方法 jQuery(function($){ //解决模态框背景色越来越深的问题 $(document).on('show.bs.modal', '.modal', function(event) { $(this).appendTo($('body')); }).on('shown.bs...
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
12-12
针对‘Bootstrap modal 多弹窗之叠加显示不出弹窗问题’说一下自己的解决办法。 当然还是官方提出的‘最好不要多个modal叠加很容易出现很难解决的前端组件问题’ 示例代码: <div class='bs-example-modal-lg fade ...
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
08-31
然而，在处理多层模态框（多弹窗叠加）时，可能会遇到一些问题，比如在关闭所有模态框后，背景的阴影遮罩层（modal-backdrop）仍然存在的问题。这个问题不仅影响用户体验，也可能导致界面交互出现异常。 问题的根源...
BootStrap modal模态弹窗使用小结
09-01
Bootstrap模态弹窗（Modal）是前端开发中常用的一个组件，它允许用户在不离开当前页面的情况下与应用程序交互。在Bootstrap框架中，模态弹窗主要用于显示临时信息、确认操作或者进行表单填写等场景。以下是对...
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
08-31
通过这种方法，我们可以有效地解决Bootstrap Modal的多弹窗叠加引起的滚动条遮罩阴影问题，同时保持Modal功能的正常运行，提供良好的用户体验。如果在实际应用中遇到其他问题，可以进一步研究Bootstrap的文档或者...
BootStrap嵌套模态框关闭
u013204622的博客
03-08 2413
** 先说点废话 有时业务需要在模态框上继续打开模态框，但是子模态框关闭会导致父级也同时关闭 ** Bootstrap自带的模态窗口关闭写法是 &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&
Bootstrap模态框的关闭
gyueh的博客
11-23 1612
目的：点击取消按钮时关闭模态框 代码如下： <button type="submit" >发送</button> <button type="button" data-dismiss="modal">取消</button> 给button按钮加data-dismiss="modal"后，点击取消按钮可以关闭模态框 ...
bootstrap中多个modal之间的切换
yixu0534的博客
08-04 7957
1、两个弹出modal的按钮，点击登录弹出登录的modal，点击注册弹出注册的modal 登录  注册 2、两个modal 没有账号，点击注册 获取验证码 我已阅读并同意相关 用户协议 账号登录
JS组件Bootstrap实现弹出框和提示框效果代码
weixin_30462049的博客
06-08 626
JS组件Bootstrap实现弹出框和提示框效果代码 作者：懒得安分 字体：[增加 减小] 类型：转载 时间：2015-12-08 我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码，对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两...
bootstrap 双层模态窗关闭问题
JAVA开发老菜鸟的专栏
05-21 324
一、页面概况 二、问题点 点击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 884
bootstrap的弹出层嵌套有一个问题 ，当子modal关闭时父的modal也会自动关闭，这可能是bootstrap的一个问题，经过资料仔细查找，发现需要修改bootstrap.js的源码， 需要找到这一行 this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, thi...
bug 随记 —— data-dismiss=“modal“
qq_44749866的博客
11-01 568
angularJS bootstrap 多层modal，二级modal 显示时，一级modal消失了（且二级modal有一级modal的button触发）。期望两个modal都应展示，只不过二级modal展示在一级modal上层。data-dismiss=“modal” 用于button上 是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。去掉button上的 data-dismiss="modal"属性。data-dismiss="modal"作用是关闭模态窗。
bootstrap modal框的事件监控
白不懂黑的静的专栏
08-13 716
bootstrap的模态框Modal经常会对其事件进行监控 模态框代码： <div class="modal fade" id="deleteGridDataConfirmModal"> <div class="modal-dialog modal-sm"> <div class="modal-content message_align"> <div class="modal-header ">
Bootstrap- Modal对话框如何在关闭时触发事件
热门推荐
zunguitiancheng的专栏
06-03 2万+
http://www.hello-code.com/blog/Bootstrap/201507/5233.html 下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。 事件 描述 实例 show.bs.modal 在调用 show 方法后触发。 $('#identifier').on('show.bs.modal',
Bootstrap Modal弹窗怎样被vue管理
05-31
要让Bootstrap Modal弹窗被Vue管理，可以使用Vue插件vue-js-modal。这个插件提供了一个Modal组件，可以方便地创建和管理弹窗。 首先，需要安装vue-js-modal插件。可以使用npm或yarn进行安装： ``` npm install vue-js-modal ``` 或者 ``` yarn add vue-js-modal ``` 然后，在Vue的入口文件中，引入插件并注册： ```javascript import Vue from 'vue' import VModal from 'vue-js-modal' Vue.use(VModal) ``` 现在就可以在Vue组件中使用Modal组件了。例如，在一个按钮的点击事件中打开一个Modal弹窗： ```html <template> <div> <button @click="showModal">打开弹窗</button> <modal :name="'my-modal'"> <h2>Hello World!</h2> </modal> </div> </template> <script> export default { methods: { showModal() { this.$modal.show('my-modal') } } } </script> ``` 这个例子中，点击按钮会调用showModal方法，在showModal方法中，使用`this.$modal.show`方法打开名为"my-modal"的Modal弹窗。Modal组件的内容可以通过插槽进行定义，这个例子中使用了一个简单的标题。 以上是一个简单的实现，具体使用方式还可以查看vue-js-modal的官方文档。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值