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

最新推荐文章于 2024-07-07 02:58:35 发布
最新推荐文章于 2024-07-07 02:58:35 发布
阅读量8.1k 收藏 1
点赞数 1
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxiaogangqq/article/details/51821359
版权

bootstrap的弹出层嵌套有一个问题 ，当子modal关闭时父的modal也会自动关闭，这可能是bootstrap的一个问题，经过资料仔细查找，发现需要修改bootstrap.js的源码，

需要找到这一行

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

也就是将modal关闭的时候的事件。改成如下 


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

记得浏览器清下缓存，项目重新启动一下

liuxiaogang-
关注
专栏目录
bootstrap模态框之间的数据交互_Bootstrap 模态框（Modal）插件数据传值
weixin_39582656的博客
12-22 635
模态框具体代码如下：×修改信息学号：密码：姓名：性别：男女关闭提交更改单击编辑图标时触发模态框，并将此行数据传入模态框。传入后如下：具体传值方法如下//触发模态框的同时调用此方法function editInfo(obj) {var id = $(obj).attr("id");//获取表格中的一行数据var stuno = document.getElementById("table").row...
bootstrap的modal弹窗，在多层窗口关闭时只会关闭自窗口，不再关闭父窗口
weixin_30823227的博客
01-29 893
bootstrap多层modal弹窗时。当子窗口关闭时，所有父窗口一起关闭。 原因是bootstrap在窗口关闭事件委托时，委托给所有窗口。 如源码： this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) 改进为： this.$elem...
修改 bootstrap 多个模态对话框 焦点冲突问题 BUG
09-12
修改 bootstrap 多个模态对话框 焦点冲突问题
一文学会 BootStrap
最新发布
阿城的博客
07-07 729
自动布局列也能和断点搭配使用，在不同断点下，进行不同的列布局，比如大屏列多一点，小屏列少一点。比如实现一行8列的布局，12的因数没有8，所以如果要使用网格系统实现，我们就需要嵌套。另外，col 包裹实际内容的，为了美观，所以给 col 设置内边距 15px，防止实际内容紧贴着容器 container。分别对应着：手机，手机横屏，平板，小屏笔记本13、14寸，一般尺寸的电脑。在xl屏幕显示6列，在lg屏幕显示4列，在md屏幕显示3列，在sm屏幕显示2列，特小屏(none)显示1列。
bootstrap模态框一闪而过和两个模态框相互影响的问题
猪头肉的专栏
02-21 493
错误代码： <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" onclick="toUpdate(${c.id})">修改</button> 在button标签里添加type=“button”，问题解决 <button type="butto...
Bootstrap多层模态框modal嵌套问题
dengling4813的博客
06-19 805
一、问题 在项目里忽然新加了一个需求，在原本弹出的模态框里，点击模态框里面的按钮再弹出一个模态框，出来另个模态框来展示详细信息。此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击（大致示意图如下），那个是时候去查过bootstrap的这个modal，官网上写着： 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要...
Bootstrap Modal遮罩弹出层(完整版)
09-01
Bootstrap Modal 的核心特点是它具有一个半透明的遮罩层和一个在屏幕中央浮动的弹出内容，提供了良好的用户体验。 在Bootstrap Modal的设计中，主要涉及到以下几个关键点： 1. **HTML 结构**： 弹出层的基础HTML...
BootStrap中的模态框（modal，弹出层）功能示例代码
10-17
在Bootstrap框架中，模态框（Modal）是一种非常实用的组件，它允许用户在当前页面上弹出一个对话框，而无需离开当前上下文。模态框提供了丰富的交互性和自定义选项，使得开发者能够轻松创建各种类型的弹出窗口，如...
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
08-31
Bootstrap Modal 是一个流行的前端框架 Bootstrap 中的一个组件，用于创建弹出式对话框。在iOS 9 中，用户可能遇到一个问题，即 Bootstrap Modal 无法正常弹出。这个问题主要由苹果的Safari 浏览器在iOS 9上的滚动条...
bootstrap modal弹出框的垂直居中
08-31
Bootstrap Modal 是一个非常实用的组件，用于在网页上创建弹出式对话框。在Bootstrap中，Modal通常用于显示额外的信息，如警告、确认消息或者表单等，而垂直居中是Modal的一个常见需求，以确保内容在任何屏幕尺寸下...
Bootstrap Modal遮罩弹出层代码分享
09-01
虽然这段代码提供了一个基本的遮罩弹出层功能，但它缺少了Bootstrap Modal的一些高级特性，比如键盘导航支持、动态调整大小、以及通过JavaScript API进行更复杂的操作。如果需要更完整的功能，建议直接使用Bootstrap...
Bootstrap系列之模态框（Modal）
老__L的博客
06-16 1万+
模态框（Modal）
bootstrap嵌套模态框完美解决
sdad2154的博客
11-29 544
本身官网不支持嵌套 但是可以弹出两个模态框 后者会在html上覆盖前者 这样每次都可以操作自己的模态框了。
解决Bootstrap一个页面弹出的模态框嵌套多个模态框时，样式混乱，按钮不能点击。
风吹草动
03-29 9707
问题：当模态框嵌套模态框时，在弹出第一个模态框时，发现样式乱了 原因：当弹出第一个模态框时，嵌套的模态框也被显示出来了，只是内容不显示，被第一个模态框压下了。 解决：在嵌套的模态框中的第一行加入style="display: none;" 即默认隐藏，这样在弹出第一个模态框时，其他模态框处于隐藏状态，样式就不会乱了 <div class="modal fade" id="addModal
关于bootstrap的modal弹出层嵌套子Modal所引发的血案（转）
weixin_34245169的博客
01-16 133
原文地址http://blog.csdn.net/liuxiaogangqq/article/details/51821359 bootstrap的弹出层嵌套有一个问题 ，当子modal关闭时父的modal也会自动关闭，这可能是bootstrap的一个问题，经过资料仔细查找，发现需要修改bootstrap.js的源码， 需要找到这一行 this.$element.on('click.dis...
bootstrap 模态框 关闭 灰色_基于Boostrap Modal开发的可多层嵌套、定制灵活的模态窗口...
weixin_39613188的博客
11-21 123
插件预览模态窗口模式消息对话框模式遮罩模式边角通知窗口模式主要特性基于jQuery、bootstrap2,3进行开发可多层嵌套，并拥有各自独立的上下文灵活的窗口元素定制模态窗口模式可载入服务端页面、远程页面、页面静态元素等内容消息对话框模式，包含info、warning、error、success、confirm等模式边角通知窗口模式，包含info、warning、error、success等模式...
bootstrap多层modal弹窗同时关闭的解决办法
Danger Changer 的博客
04-01 8119
bootstrap多层modal弹窗时。当子窗口关闭时，所有父窗口一起关闭。 原因是bootstrap在窗口关闭事件委托时，委托给所有窗口。 如源码： 改进为 这样在多层窗口关闭时只会关闭自窗口，不再关闭父窗口
bootstrap中的模态框（modal，弹出层）
热门推荐
开发笔记
08-16 12万+
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值