多个bootstrap模态框在同一页面无法正常显示

最新推荐文章于 2020-10-27 17:35:59 发布
最新推荐文章于 2020-10-27 17:35:59 发布
阅读量3.8k 收藏
点赞数 4
CC 4.0 BY-SA版权
分类专栏： javaweb 文章标签： bootstrap 模态框 谷歌 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzx159951/article/details/78517338
本文介绍了在同一页面上正确显示多个模态框的方法及注意事项，包括如何避免ID冲突、确保<div>标签正确配对等关键细节。

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

首先说一下，多个模态框在同一页面是完全可以正常显示的，下面说几个注意事项。

  1. 使用触发器或使用js .modal(“show”) 来触发模态框
    这个就要注意了，每个模态框的id注意不要一样。

  2. <div></div> 注意是不是一一匹配，基本上只出现背景，不出现框的情况都是由div不是一一匹配造成的，导致上一个模态框把下一个包含进去。如果自己看不出来的话，可以借助谷歌浏览器看一下结构就清楚了。

Bootstrap 模态框（Modal）插件
shengyin714959的博客
08-16 193
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
Bootstrap3 多个模态对话框无法显示的解决方案
12-11
今天帮同事调了一个代码，他们的项目最近在用Bootstrap做开发，突然间，他遇到了一个奇怪的问题，如果一个页面中，有多个Modal对话框的话，排列在第一个的对话框，能够正确显示，第二个，只能导致页面出现MASK层，却不能显示Dialog. 如果调整顺序，仍然是第一个能显示，第二个只有页面变暗。效果如下： 第一个，正常弹出的Dialog 第二个无法弹出，只是页面变暗的dialog 而两个dialog的代码是完全一致的，具体的代码如下： <div class="modal fade" id="mediaMsgDialog" tabindex="-1" role="dialog" aria
Bootstrap多个模态框显示不正常
b809220024的博客
06-17 2175
最近使用bootstrap的modal时，遇上一个问题。同样的modal，内容一模一样，但是只能显示第一个，第二个显示不正常。 表现为“屏幕变黑，但是modal没显示出来” 查询得知，可能是多个modal引用冲突，解决方案是在最外层加个div，用div包裹起来<!--这个div就是用来包裹modal的--> <div> <div id="staticA" clas
bookstrap使用多个模态框，发现有的正常，有的只显示遮罩层
3k油：知道的越多，不知道的越多
06-01 331
浏览博客链接: https://blog.csdn.net/lzx159951/article/details/78517338 https://blog.csdn.net/xcc_2269861428/article/details/84578938 注意：触发model的方式有三种 是a标签 是button标签 是js种的函数触发$(’#identifier’).modal(options) 导致我出现这个BUG的原因就是modal里的<div></div>不匹配。
bootstrap模态框中使用select2插件下拉框不显示的问题
small_33的博客
10-27 633
珊妹儿今天又遇到个问题，就是使用bootstrap的模态框，上一个模态框还没关闭再次弹出一个模态框中使用了select2下拉选的功能，发现下拉框显示在两个模态框中间层了，也就是不显示在最上层，珊妹给它加了个z-index:999999999；还是不好使，千千万万没想到的是要配合display:block来使用，至于究竟是为何？珊妹儿也未可知！ 就是在style里添加如下代码： .select2-container--open{ z-index:9999999 !important;
同一页面无法显示多个模态框的解决办法
weixin_38353851的博客
01-01 5317
问题描述：第一个模态框可以正常弹出，第二个模态框只显示阴影，无弹出。 解决办法：在两个模态框的代码外分别包裹div。 如图所示，这是一个修改教师信息的弹出框，模态框的具体代码被我折叠了，大家看包裹的模态框的div就好。给每个模态框加这样的div就能正常显示了。
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
11-30
在开发个人播客系统时，可能会遇到一个特定的Bootstrap模态框问题，即当模态框弹出并选择跳转到同一HTML模板的上一页或下一页时，模态框消失但背景层仍然存在，导致页面状态异常。解决这个问题需要理解Bootstrap模态...
基于bootstrap 在同一个界面弹出不同的模态框
ChiangShenHung
10-29 2871
同一个页面如何操作多个模态框的弹出 &lt;button class="btn btn-info" data-toggle="modal" data-target="#myModal"&gt;第一个模态框&lt;/button&gt; &lt;button class="btn ben-default" data-toggle="modal" data-targe
jquery阻止bootstrap模态框多次执行ajax
最新发布
09-15
在使用jQuery和Bootstrap框架开发网页时，我们可能会遇到在模态框中多次触发同一事件导致多个Ajax请求被同时发送的情况。为了防止这种情况发生，我们可以在发送Ajax请求前对模态框进行一些控制，以阻止用户在等待...
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
12-12
最近一直在使用Bootstrap,遇到了很多问题，通过google也明白了很多，学习了很多。针对‘Bootstrap modal 多弹窗之叠加显示不出弹窗问题’说一下自己的解决办法。 当然还是官方提出的‘最好不要多个modal叠加很容易出现很难解决的前端组件问题’ 示例代码: <div class='bs-example-modal-lg fade modal' data='0' id='feature-mapping-dialog-form' xss=removed> <div class='modal-dialog modal-max-lg'> <d
bootstrap 同一个页面实现2个模态框，一个可以正常显示、一个不能
热门推荐
xcc_2269861428的博客
11-28 1万+
1、当一个页面中只存在一个模态框时，大家可以使用菜鸟教程中的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <link rel="stylesheet" hre...
关于多个bootstrap模态框显示层级的关系
weixin_43252365的博客
10-12 1415
关于多个bootstrap模态框显示层级的关系 今天使用bootstrap模态框时发现一个问题 我在两个页面中都使用了双模态框的显示方法，但是其中一个模态框实现正常，另一个页面中较小的模态框却被大模态框覆盖了，两个页面对比了一下发现样式什么的都是一模一样，唯一不一样的就是两个模态框在页面中的放置位置，我想会不会是因为读取代码的前后顺序导致了这个问题，然后我把大模态框的代码段位置放到了小模态框的前面...
bootstrap多层modal框的遮罩问题
sinat_29247277的博客
07-05 2913
在modal框上弹出modal框的时候效果如下 如大家所见，下层并没有进行遮罩，原因是最上层的modal的z-index需要比遮罩大，下层的需要比遮罩小，而modal的遮罩效果z-index为1040 .modal-backdrop {//bootstrap的遮罩属性 position: fixed; top: 0; right: 0; bottom: 0; lef...
Bootstrap3 多个模态对话框无法显示的问题
weixin_34306676的博客
05-03 119
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap modal 打开多个弹窗关闭后阴影遮罩问题
henghaheibiu的博客
07-22 619
今天碰到这个问题，打开了多个modal，当关闭最后一个modal的时候后面的遮盖层并没有关闭，但是百度了一会，给出的答案都不好用。就自己办法解决一下。直奔正题，打开多个弹框，肯定是有先后顺序的，当打开第一个modal框的时候。给x赋值一个onclick事件，当点击这个事件，关闭所有遮盖层。 $(".close").attr(“onclick”,“closemodal()”); function closemodal(){ $(".modal-backdrop").remove(); } ...
解决Bootstrap一个页面弹出的模态框嵌套多个模态框时，样式混乱，按钮不能点击。
风吹草动
03-29 9779
问题：当模态框嵌套模态框时，在弹出第一个模态框时，发现样式乱了 原因：当弹出第一个模态框时，嵌套的模态框也被显示出来了，只是内容不显示，被第一个模态框压下了。 解决：在嵌套的模态框中的第一行加入style="display: none;" 即默认隐藏，这样在弹出第一个模态框时，其他模态框处于隐藏状态，样式就不会乱了 <div class="modal fade" id="addModal
bootstrap模态框一闪而过和两个模态框相互影响的问题
猪头肉的专栏
02-21 553
错误代码： <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模态框（一个页面显示多个）的使用
weixin_30305735的博客
07-25 977
在一个页面显示多个模态框时要讲每个模态框用div包裹起来，否咋会产生格式错误。 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../css/bootstrap.min.css"> &...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值