bootstrap用在一个页面上写多个模态框，弹出一个模态框时，里面的标签不可用解决方法

最新推荐文章于 2021-01-11 23:14:19 发布
最新推荐文章于 2021-01-11 23:14:19 发布
阅读量1.8k 收藏 1
点赞数
文章标签： bootstrap html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhf296095496/article/details/88429826
版权

bootstrap用在一个页面上写多个模态框，弹出一个模态框时，里面的标签不可用解决方法

本人写页面时，发现用模态框不错,但是在一个页面多个模态框是，单击按钮弹出模态框，发现有的模态框里的标签不可用，网上查了一下，很多都是关于模态框里嵌模态框的解决办法(也有可能我搜索方法不对)，所以直接自己扒代码看看，在bootstrap.css中有这样一段代码，下图，在这里插入图片描述
模态框是浮动的，而且z-index：1050，这样，如果一个页面写多个模态框的话，他们的z-index都是1050，即便隐藏起来，弹出的模态框也有可能被其他隐藏起来的模态框遮住，所有我写了一段js代码，用来当弹出模态框时，把他们的z-index值提高，这样就不会被其他模态框遮住在这里插入图片描述
然后在按钮上调用一下js代码就可以了
在这里插入图片描述

侯哥不怕你
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
08-31
主要介绍了扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框,需要的朋友可以参考下
bootstrap模态框弹出效果
06-24
bootstrap模态框弹出效果是一款15种模态框弹出效果代码。
Bootstrap中双重模态框显示解决方案
Oliver尹的博客
08-03 3424
问题：在调用bootstrap的模态框后，触发模态框上的一个事件，再在本模态框上再跳出一个模态框。 方法： 个人开发中遇到的多重模态框的问题，bootstrap原则上不推荐使用这种多重覆盖的方法，查询许久之后，记录一下 注意：第二个模态框的div在html代码上一定要在第一个模态框的div之后 方案一： 在多重模态框的的当前页面加上两个代码片段 $(document).on('sho...
bootstrap如何增加多个模态框以及解决各个模态框互不影响的问题
zhang19903848257的博客
01-17 3634
先在同一个html的页面上建立两个相同的模态框 注意 第一个模态框的点击按钮的 data-targe属性为#myModa Launch demo modal 第一个模态框 <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal...
bootstrap 同一个页面实现2个模态框，一个可以正常显示、一个不能
xcc_2269861428的博客
11-28 9658
1、当一个页面中只存在一个模态框时，大家可以使用菜鸟教程中的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <link rel="stylesheet" hre...
解决Bootstrap一个页面弹出的模态框嵌套多个模态框时，样式混乱，按钮不能点击。
风吹草动
03-29 9677
问题：当模态框嵌套模态框时，在弹出第一个模态框时，发现样式乱了 原因：当弹出第一个模态框时，嵌套的模态框也被显示出来了，只是内容不显示，被第一个模态框压下了。 解决：在嵌套的模态框中的第一行加入style="display: none;" 即默认隐藏，这样在弹出第一个模态框时，其他模态框处于隐藏状态，样式就不会乱了 <div class="modal fade" id="addModal
在iframe中使bootstrap的模态框在父页面弹出问题
08-29
主要介绍了在iframe中使bootstrap的模态框在父页面弹出问题,解决方法非常不错，具有参考借鉴价值，需要的朋友可以参考下
同一页面无法显示多个模态框的解决办法
weixin_38353851的博客
01-01 5225
问题描述：第一个模态框可以正常弹出，第二个模态框只显示阴影，无弹出。 解决办法：在两个模态框的代码外分别包裹div。 如图所示，这是一个修改教师信息的弹出框，模态框的具体代码被我折叠了，大家看包裹的模态框的div就好。给每个模态框加这样的div就能正常显示了。
bootstrap弹出多个模态框_bootstrap中多个modal弹出的问题解决方案
weixin_39966225的博客
12-28 784
在bootstrap的官网中了解到modal弹出只是支持单个，对于嵌套的modal并没有提供相应的解决方案，本文这里就根据网上找到的案例进行整理得到。解决方案主要是通过对modal的zindex进行赋值，使最新弹出的modal总是在最前面的。$(document).ready(function () {// 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面...
bootstrap在一个模态框上弹出另一个模态框遮罩层问题
热门推荐
ILOVE_的博客
06-01 2万+
bootstrap3官网明确指出 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。 开发过程中经常会遇到在一个模态框上弹出另一个模态框， bootstrap.css中 模态框的z-index为1050.modal { position: fixed; top: 0; right:
bootstrap弹出多个模态框_Bootstrap 显示多个模态框（modal）
weixin_36048838的博客
01-11 2322
概述Bootstrap只支持同时显示一个模态框(貌似是因为【data-dismiss="modal"】委托为了全局，故显示多个模态框后，点击“关闭”，【data-dismiss="modal"】会将所有的模态框关闭)。若要显示多个模态框并各自单独关闭，可使用Js(或Jquery)单独进行控制。备注：Bootstrap Modal多个弹出层顺序与html中定义顺序相关，后定义的位于上层。方法触发点(...
bootstrap实现多模态框的方法
全赞功成湿的博客
05-13 1万+
本文描述了bootstrap模态框用来做多模态框的问题，解决并实现了bootstrap多模态框。
Bootstrap模态框（一个页面显示多个）的使用
weixin_30305735的博客
07-25 897
在一个页面显示多个模态框时要讲每个模态框用div包裹起来，否咋会产生格式错误。 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../css/bootstrap.min.css"> &...
bootstrap中模态框上弹出另外一个模态框
zhangjing1019的博客
09-09 5569
bootstrap3官网明确指出 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。 bootstrap.css中，遮罩蓬的z-index是1040，模态框modal的z-index是1050； 所以想要一个模态框上弹出另外一个模态框，只需改变modal的z-index的值，z-index的值大于1050就行； 欢迎关注我的
模态框中弹模态框的问题
BOOLEAN的博客
07-11 2211
有时候会遇到模态框中弹另外一个模态框的时候，若是旧模态框需要隐藏的时候，直接在点击事件里加上$('#aaa').modal('hide')即可，若是想旧模态框一直保持，但是新模态框也要弹出，这样的话，新模态框z-index应该大于旧模态框；若是 div中load模态框的话，必须把加载新模态框的div放在加载旧模态框的div之后才能生效。...
关于在bootstrap 弹出框上再弹出模态框的BUG？
KoalaShane
12-08 9046
最近遇到一个问题，需要在弹出框上再弹出一个模态框来。因为之前没有遇到过，所以第一反应是去百度上查一查相关资料，可惜，没有想要的答案，也没有看到有效的解决办法。
bootstrap单页面两个模态框的使用方法
滴水石穿
08-03 3516
<html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件方法</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstr...
可以给我用bootstrap写一个登录页面的模态框弹出效果
最新发布
06-10
在这个例子中，我们使用了 Bootstrap 的模态框组件来创建一个登录页面的弹出框。我们在触发模态框的按钮上添加了 `data-toggle="modal"` 和 `data-target="#loginModal"` 属性，这样点击按钮时就会触发模态框的显示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值