Bootstrap模态出现在背景下
nat*_*nes 554 javascript css modal-dialog twitter-bootstrap
我直接从Bootstrap示例中使用了代码用于我的模态,并且只包含了bootstrap.js(而不是bootstrap-modal.js).但是,我的模态出现在灰色淡入淡出(背景)下方,并且不可编辑.
这是它的样子:
看到这个小提琴是一种重现这个问题的方法.该代码的基本结构如下:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
任何想法为什么这是或我可以做些什么来解决这个问题？
Muh*_*uhd 602
如果模态容器具有固定或相对位置或位于具有固定或相对位置的元素内,则会发生此行为.
确保将模态容器及其所有父元素定位为修复问题的默认方式.
以下是几种方法:
- 最简单的方法是移动模态div,使其位于任何具有特殊定位的元素之外.一个好地方可能就在关闭身体标签之前
</body>. - 或者,您可以
position:从模态及其祖先中删除CSS属性,直到问题消失.但是,这可能会改变页面的外观和功能.
- 接得好.仅供参考,不仅仅是"固定",父母的位置"相对"也会导致这个问题 (21认同)
- 我不明白这个答案.Bootstrap示例显示了一个模态div,其中包含"modal","modal-fade"等行中的多个类.在.modal中,它设置position:fixed,在"modal-body"中设置position:relative.那么当.modal设置position:fixed时,如何移动模态容器来改变任何东西？ (9认同)
- 首选使用选项一:"只需移动模态div,使其位于任何具有特殊定位的元素之外".谢谢 (4认同)
- @Muhd你如何确保它及其所有父元素都以默认方式定位？ (3认同)
- 我还有这个问题.我在`</ body>`之前添加它,而`body`没有任何`position`风格属性.还有其他想法吗？ (3认同)
- 此外,"navbar-static-top"属性可能会导致问题 - 花一整天时间让它工作! (2认同)
- 即使在具有“ position：absolute”位置的父元素上，我也看到了这一点。如果我删除它的作品。不幸的是，我不能将元素移动到其他地方，因为它是由组件动态呈现的。 (2认同)
小智 361
问题与父容器的定位有关.在显示之前,您可以轻松地从这些容器中"移动"模态.如果你show使用js使用你的模态,这里是怎么做的:
$('#myModal').appendTo("body").modal('show');
或者,如果您使用按钮启动模态,请删除.modal('show');并执行以下操作:
$('#myModal').appendTo("body")
这将保留所有正常功能,允许您使用按钮显示模态.
- 使用该通用事件处理程序使@leandrotk解决方案适用于页面中的所有模态`$('.modal-dialog').parent().on('show.bs.modal',function(e){ $(e.relatedTarget.attributes ['data-target'].value).appendTo('body');})` (11认同)
- 谢谢,它对我有用:) (6认同)
- 当你真的无法修复CSS定位时,这很有用.谢谢 :) (5认同)
- 最好的解决方案 (3认同)
- @PatrickM.惊人!这就像我正在接手的一个旧项目上的魅力一样,他们在各处都有模态! (2认同)
小智 163
我尝试了上面提供的所有选项,但没有使用它们.
做了什么:将.modal-backdrop的z-index设置为-1.
.modal-backdrop {
z-index: -1;
}
- 这非常有效,是迄今为止最简单的解决方案.我使用`z-index:0;` (9认同)
- 如果您使用的主题具有许多不同的 z 索引，则此方法不起作用。例如，将背景设置为“-1”将导致它出现在页面上其他元素（例如面板）的“后面”。但将其设置为“3”使其高于除模式弹出窗口之外的所有内容。 (3认同)
Sid*_*Sid 152
另外,请确保BootStrap css和js的版本相同.不同的版本也可以在背景下出现模态:
例如:
坏:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
好:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
- 接得好!为我解决了,甚至没想过...... (16认同)
Pie*_*rVK 112
我也遇到过这个问题,直到我发现我实际上不需要背景时,没有一个解决方案适合我.您可以使用以下代码轻松删除背景.
<div class="modal fade" id="createModal" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Create Project</h4>
</div>
<div class="modal-body">Not yet made</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
注意:该data-backdrop属性需要设置为false(其他选项:static或true).
- 谢谢!这个问题有超过140k的视图,我不明白为什么bootstrap无法解决这个问题.哦,欢呼. (3认同)
- 到目前为止，最简单的解决方案，就像一个魅力！ (2认同)
And*_*ter 57
我打开它后,通过给模态窗口提供一个高z-index值来实现它.例如:
$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
- 我不明白下来的选票.是的,它是hacky,但其他解决方案对我不起作用,所以我认为我会把这个贡献给那些不介意使用"hacky"解决方案来让这个该死的东西工作的人. (5认同)
- 这是一个糟糕的答案,因为它是一个黑客,并没有任何尝试表明这一点.其他答案说,"如果没有别的办法可以......".现实情况是,模式在网络上得到了广泛使用,如果正确实施,应该可以正常使用.Hacky的答案并不能帮助人们以正确的方式解决问题. (3认同)
Kri*_*ndu 31
@Muhd提供的解决方案是最好的方法.但是如果您遇到无法选择更改页面结构的情况,请使用此技巧:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
这里的诀窍是data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" 删除默认背景并通过设置对话框本身的背景颜色和一些alpha来创建一个虚拟背景.
更新1: 正如@Gustyn指出的那样,单击背景并不会按预期关闭对话框.所以要实现这一点,你必须添加一些java脚本代码.以下是如何实现这一目标的一些示例.
$('.modal').click(function(event){
$(event.target).modal('hide');
});
Roh*_*han 15
但是这很晚但是这里是一个通用的解决方案 -
var checkeventcount = 1,prevTarget;
$('.modal').on('show.bs.modal', function (e) {
if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
{
prevTarget = e.target;
checkeventcount++;
e.preventDefault();
$(e.target).appendTo('body').modal('show');
}
else if(e.target==prevTarget && checkeventcount==2)
{
checkeventcount--;
}
});
访问此链接 - Bootstrap 3 - 使用固定侧边栏获取详细信息时,模态消失在背景下方.
小智 10
另一种方法是从.modal-backdropbootstrap.css中删除z-index .这将导致背景与身体的其他部分处于同一水平(它仍会褪色),并且您的模态将位于顶部.
.modal-backdrop 看起来像这样
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
小智 10
只需添加两行CSS:
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
.modal-backdrop应该有1050的值来设置它在导航栏上.
小智 10
我找到的最简单的解决方案，适用于我的所有案例，是类似帖子中的答案：
这里是：
.modal {
background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop {
display: none;
}
基本上，不使用原始背景。相反，您使用模态作为背景。结果是它的外观和行为与原版完全一样。它避免了 z-indexes 的所有问题（对我来说，将 z-index 更改为 0 解决了这个问题，但是我的导航菜单在模式和背景之间产生了一个新问题）并且很简单。
感谢@Jevin O. Sewaruth 发布了原始答案。
最简单的解决方案是将模式对话框移到任何容器之外，然后在<body>元素下声明它：
<body>
<div>
...
<div>
<div class="modal">
... modal dialog here
</div>
</body>
我已经尝试过这个解决方案并且它对我有用。
我只是设置:
#myModal {
z-index: 1500;
}
它的工作原理....
对于原始问题:
.my-module {
z-index: 1500;
}
当在背景甚至手风琴标题之类的东西中使用CSS中的渐变之类的东西时,通常会遇到这个问题.
不幸的是,修改或覆盖核心Bootstrap CSS是不可取的,并且可能导致不必要的副作用.最不具侵入性的方法是添加,data-backdrop="false"但您可能会注意到淡入淡出效果不再按预期工作.
在最近发布的Bootstrap之后,版本3.3.5似乎解决了这个问题,没有不必要的副作用.
下载:https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
请务必包含3.3.5中的CSS文件和JavaScript文件.
嗨,我有同样的问题,然后我意识到,当你使用bootsrap 3.1与旧版本的bootsrap(2.3.2)不同,模式的html结构已更改!
你必须用模态对话框和模态内容包装模态标题的主体和页脚
<div class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
**here goes the modal header body and footer**
</div>
</div>
</div>
我有这个问题,修复它的最简单方法是在模态对话框div上添加大于1040的z-index:
<div class="modal-dialog" style="z-index: 1100;">
我相信bootstrap会创建一个div模式背景淡入淡出,在我的情况下有z-index 1040,所以如果你把模态对话框放在这个上面,它就不应该变灰了.
这将覆盖所有模态，而不会弄乱任何动画或预期行为。
$(document).on('show.bs.modal', '.modal', function () {
$(this).appendTo('body');
});
- 我认为最好的解决方案。无需编辑任何 css 并更改模式外观 (3认同)
- 全球解决方案。但最好找到问题所在。 (2认同)
我通过添加data-backdrop="false"到 div解决了我的问题：
<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
.....
在您的导航栏navbar-fixed-top需要z-index = 1041
以及如果您使用bootstarp-combined.min.css也更改 .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041
小智 5
以上建议的解决方案都没有为我工作,但这种技术解决了这个问题:
$('#myModal').on('shown.bs.modal', function() {
//To relate the z-index make sure backdrop and modal are siblings
$(this).before($('.modal-backdrop'));
//Now set z-index of modal greater than backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
小智 5
将z-index .modal设置为最高值
例如,.sidebarwrapper的z-index为1100,因此将.modal的z-index设置为1101
.modal {
z-index: 1101;
}
小智 5
我有一个更轻,更好的解决方案..
它可以通过一些额外的CSS样式轻松解决..
隐藏类
.modal-backdrop(从Bootstrap.js自动生成)
Run Code Online (Sandbox Code Playgroud).modal-backdrop { display:none; visibility:hidden; position:relative }将背景设置
.modal为半透明的黑色背景图像.
Run Code Online (Sandbox Code Playgroud).modal { background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png") // translucent image from google images z-index:1100; }
如果您的要求需要模态位于元素内而不是</body>标记附近,这将最有效.
在我的情况下解决它,在我的样式表中添加:
.modal-backdrop{
z-index:0;
}使用google调试器,可以检查元素BACKDROP并修改属性.祝你好运.
| 归档时间： |
|
| 查看次数： |
357048 次 |
| 最近记录： |