bootstrap模态框不在最上层

最新推荐文章于 2023-10-25 11:45:37 发布
最新推荐文章于 2023-10-25 11:45:37 发布
阅读量2.8k 收藏
点赞数
文章标签： javascript python 前端 ViewUI
原文链接：https://my.oschina.net/airship/blog/859674
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

如题：已经将模态框的z-index:设置成了1111111；但是仍然不是在最上层，亟待解决~~具体情况如图所示15150005_Twcv.jpg

2个回答

答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问


已采纳

应该是你的.modal-backdrop样式设置成了111111，导致背景在窗口之上了，应该讲值设置小点，让其在窗口下面即可。

15150006_m3D5.jpg

 

答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问

模态框的html中的二级div设置z-index成111111，我觉得你是设置了第一级的div的z-index成了111111

转载于:https://my.oschina.net/airship/blog/859674

weixin_34106122
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angular2 ngx-bootstrap modal模态框不在最上层
何欣澄的博客
06-03 4125
angular-cli bootstrap4 使用模态框时，遇到了这2个问题 模态框 不显示 模态框显示后不在最上层 模态框 不现实的问题这个是纠结最久的问题，明明和官方文档例子一样但是就是不出来 用f12 选择看到模块都在，只是没有显示出来，然后去官方文档又仔仔细细的看了一遍发现少加了一个样式 Let ngx-bootstrap know you are using BS4O
bootstrap中的模态框（modal，弹出层）
热门推荐
开发笔记
08-16 12万+
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。
解决bootstrap弹出多个modal遮罩始终在第一个modal下面问题
luchao1989的博客
03-17 2459
弹出3个modal，第3个modal的遮罩应该盖住第2个modal，同理，第2个modal的遮罩应该盖住第1个modal
bootstrap 的 模态框在父iframe中弹出
简的博客
06-12 1万+
作为一个后台，公司没前端真的很痛苦，所以就得写页面，用的bootstrap的modal，但是碰到坑了，先上图，期望结果如下 然而呢， 实际情况是下面这样，着实尴尬： 首先，作为一个后台，真的吐槽下网上找到的那些方式，真的是看着都不懂，何况解决问题 废话不多说，现在说解决办法， 其实很简单，没有网上那么多繁琐的步骤，总共改掉的地方也仅仅只有十几行代码 吐槽完了，那么上源码，先来没有解...
Bootstrap 模态框(Modal)与layer.prompt()冲突，layer.prompt()不起作用
山水子农
12-21 1万+
报表查询条件框是Bootstrap的模态框（Modal），点击保存按钮弹出layer.prompt()不能获取焦点，主要问题是Bootstrap的模态框（Modal）的div中包含tabindex="-1"。去掉tabindex="-1"就ok了，原始程序： × 报表查询条件 修改后：
Bootstrap 多弹窗（模态窗），第二层覆盖前一层解决办法
lebron3v的专栏
11-21 5040
问题说明：最近公司遇到了一个需求，需要在bootstrap一个模态窗上再弹出一个模态窗，出现，第二个模态窗被第一个模态窗覆盖的问题，很是尴尬。 解决方案：在网上查阅了很多博客，都说是要各种修改bootstrap的源码之类的，复杂且不一定有效。下一行是重点。 解决这个问题的关键点在于你的模态窗页面代码的顺序。只要将代码顺序按照你想要的弹出窗顺序排列皆可以解决这个问题！如，第一层在前，第二层在后 ...
bootstrap模态框 遮挡_Bootstrap Modal遮罩弹出层(完整版)
weixin_39658759的博客
12-18 965
之前发表过一篇文章叫Bootstrap Modal弹窗代码，其实那个只是一个弹出层代码而已，并不是仿造Bootstrap的，Bootstrap modal是给外层添加固定fixed，然后内容使用自适应靠上居中方式。今天分享的这篇文章正是这种方式。html结构考虑到内容区域需要居中对齐，所以至少要有一个div来定位和显示背景，再用一个div居中内容，内容区域想分成header、body和footer...
bootstrap模态框modal被遮罩层挡住问题处理
wzp20092009的博客
03-18 3725
先从modal的配置中移除遮罩层 <!-- 需要在外面的modal需要设置参数data-backgrop为false，这样就不会显示遮罩层了 --> <div class="modal" id="topMenu-modal" tabindex="-1" role="dialog" data-backdrop="false"> <div class="modal-dialog" role="document"> <div class="m.
Bootstrap和jQuery时钟风格插件clockpicker
05-05
clockpicker是一款模仿时钟风格的插件，可使用于bootstrap，也可依赖于jquery库，功能强大，设置简单，可轻松便捷的加入到网站应用中。clockpicker兼容主流浏览器，但在IE8下，样式和行为不够友好。clockpicker可以支持移动设备和PC，在触屏设备上也可以很好的工作。演示地址：http://www.jqcool.net/bootstrap-clockpicker.html
php使用popover,php中bootstrap框架.popover弹出框，鼠标移动到上面自动显示，离开自动消失...
weixin_42361623的博客
03-23 409
$(function(){//显示弹出框$("[rel=name]").popover({trigger:'manual',placement : 'bottom', //placement of the popover. also can use top, bottom, left or righttitle : '弹出框中标题', //this is the top title bar of ...
实现bootstrap 模态框（Modal）居中
ztan
10-20 2663
工作中使用到bootstrap的模态框，但是这个东西好像没有提供居中的属性，看了网上的大多都是使用js重新计算模态框的位置，感觉太麻烦。所以研究了一下，发现重写class就行了~~~~ bootstrap版本 ：3.3.7 默认的效果图 修改后的效果图；还可以哈~ ** 修改方法重写class： 必须要能覆盖之前的样式，不然不能其效果… ** .modal { width:100%; top: 50%; left: 50%;
Bootstrap使用模态框modal遇到的相关问题
AcLings的博客
11-27 745
1、在关闭modal后，modal的幕布没有一同关闭消失，仍然存在，如图： 点开F12，可以看到这个modal幕布并没有随着modal消失 解决方法有两个： a、在关闭modal的时候同时触发一个点击事件，直接把幕布去掉 <button type="submit" class="btn green" onclick="qingchu();">关闭</button> &l...
黄聪：解决Bootstrap模态框（modal）弹出后页面跑到顶部的办法
weixin_33860147的博客
05-05 2589
bootstrap 3.1.1 版本解决方案： body.modal-open { position: absolute !important; }  
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
最新发布
昊虹AI笔记
10-25 2979
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
Bootstrap模态框（modal）多层叠加弹出、模态框样式效果设置等问题处理（持续更新帖）
Vinnie.Wu的博客
08-03 2979
在bootstrap框架使用过程中，模态框可能是最为常用的组件之一。通过弹出模态框，可以满足多种会话应用层场景，使得业务流程更加合理和人性化。今天对模态框常用的两个小功能做下记录，分别为多模态框弹出顺序设置和模态框弹出窗体可拖动设置。 一、多弹出框顺序设置 在一个场景内，可能需要弹出两个或者更多模态框，而每个模态框的弹出需要一定的逻辑顺序，这个时候要求我们合理设置弹出顺。 解决办法：最简单的处理办法就是将多个模态框的div在页面上设置相应的顺序（自上而下的排列顺序皆可），越往下排序，则弹出优先级越高（
用Bootstrap框架弹出iframe页面 在弹出的模态框中载人iframe页面
人生若南柯一梦
09-23 3万+
1、用Bootstrap框架弹出iframe页面 2、在弹出的模态框中载人iframe页面
Bootstrap模态框modal的高度和宽度设置
annie_yaning的博客
03-23 8520
（1）高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上，整个模态框的高度不会发生变化 如下图所示： 将style=“height:900px”放在<div class = "modal-content">上，是将整个模态框（包括头部、中间、末尾）设置为高度为900px;如下图所示： 若将style=“height:900px放在<div class = "modal-header">.
bootstrap规范整理--坚持本心
future_bgj的博客
07-20 533
声明顺序 相关的属性声明应当归为一组，并按照下面的顺序排列： PositioningBox modelTypographicVisual 由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。 其他属性只是影响组件的内部（inside）或者是不影响前两
bootstrap模态框
08-03
引用[1]、[2]和[3]提供了关于Bootstrap模态框的三个示例。Bootstrap模态框是一种常用的弹出窗口组件，用于在网页中显示临时的内容或交互。模态框通常包含一个标题、内容和底部按钮。用户可以通过点击按钮或链接来触发模态框的显示。 在这三个示例中，模态框的基本结构是相似的。它们都包含一个按钮，用于触发模态框的显示，以及一个具有标题、内容和底部按钮的模态框本身。 示例[1]展示了一个小模态框，它的大小是小型的。示例[2]展示了一个简单模态框，它的大小是默认的。示例[3]展示了一个大模态框，它的大小是大型的。 无论是小型、默认还是大型的模态框，它们的基本结构都是相同的。它们都包含一个模态框头部，用于显示标题，一个模态框主体，用于显示内容，以及一个模态框底部，用于显示底部按钮。 通过使用Bootstrap提供的CSS和JavaScript，我们可以轻松地创建和自定义模态框，以满足不同的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值