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; }
任何想法，为什么这是或我能做些什么来解决这个问题？
如果模态容器具有固定或相对位置，或者位于具有固定或相对位置的元素内，则会发生该行为。
确保将模态容器及其所有父元素定位为解决问题的默认方法。
这里有几个方法来做到这一点：
- 最简单的方法就是移动模态div，使其位于具有特殊定位的任何元素之外。 一个好的地方可能就在closuresbody标签之前
</body>。 - 或者，您可以从模式及其祖先删除
position:CSS属性，直到问题消失。 但是，这可能会改变页面的外观和function。
问题与父容器的位置有关。 在显示之前，您可以轻松地将这些模块“移出”这些容器。 下面是如何使用js show你的模式：
$('#myModal').appendTo("body").modal('show');
或者，如果使用button启动模式，请删除.modal('show'); 只是做：
$('#myModal').appendTo("body")
这将保持所有正常function，允许您使用button显示模式。
另外，请确保BootStrap css和js的版本是相同的。 不同的版本也可以使模态出现在背景下：
例如：
坏：
<link href="bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
好：
<link href="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>
我尝试了上面提供的所有选项，但没有得到它使用这些工作。
做了什么工作：将.modal-backdrop的z-index设置为-1。
.modal-backdrop { z-index: -1; }
我也遇到了这个问题，没有任何解决scheme为我工作，直到我想我实际上不需要背景。 您可以使用下面的代码轻松删除背景。
<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
我通过给打开它之后的模态窗口给出一个高的Z-index值来得到它的工作。 例如：
$("#myModal").modal("show"); $("#myModal").css("z-index", "1500");
@Muhd提供的解决scheme是最好的方法。 但是如果你陷入了不能改变页面结构的情况，那就用这个技巧：
<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);" 通过删除默认的背景，并创build一个虚拟的一个通过设置对话框本身的背景颜色与一些阿尔法。
更新1：正如@Gustyn所指出的那样，点击背景不会像预期的那样closures对话框。 所以要实现你必须添加一些Java脚本代码。 下面是一些例子，你可以做到这一点。
$('.modal').click(function(event){ $(event.target).modal('hide'); });
但是在这个问题上，但是这里是一个通用的解决scheme –
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 – 使用固定边栏获取细节时，模式消失在背景下方 。
另一种方法是从bootstrap.css中的.modal-backdrop中删除z-index。 这将导致背景与身体的其他部分保持在同一水平（它仍然会褪色），而你的模式将处于最佳状态。
.modal-backdrop看起来像这样
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000000; }
我简单地设置：
#myModal { z-index: 1500; }
它的作品….
对于原来的问题：
.my-module { z-index: 1500; }
当在CSS中使用诸如背景甚至手风琴标题之类的渐变时，经常会遇到这个问题。
不幸的是，修改或覆盖核心引导CSS是不可取的，并可能导致不必要的副作用。 最less干扰的方法是添加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文件。
只需添加两行CSS：
.modal-backdrop{z-index: 1050;} .modal{z-index: 1060;}
.modal-backdrop应该有1050个值来将其设置在导航栏上。
我有这个问题，解决这个问题的最简单的方法是在modal dialogdiv上的addind z-index大于1040：
<div class="modal-dialog" style="z-index: 1100;">
我相信bootstrap创build一个div模式 – 背景淡入淡出，在我的情况下有z-index 1040，所以如果你把模式对话框放在这上面，它不应该是灰色了。
上述build议的解决scheme都没有为我工作，但是这个技术解决了这个问题：
$('#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); });
将z-index .modal设置为最高值
例如，.sidebarwrapper的z-index为1100，因此将.modal的z-index设置为1101
.modal { z-index: 1101; }
在你的导航栏navbar-fixed-top需要z-index = 1041 ，而且如果你使用bootstarp-combined.min.css那么也会改变.navbar-fixed-top, .navbar-fixed-bottom z-index to 1041
嗨，我有同样的问题，然后我意识到，当你使用靴带3.1不像旧版本的靴子（2.3.2）的模式的HTML结构改变了！
你必须用modal dialog和模态内容来包装你的模态头部和页脚
<div class="modal hide fade"> <div class="modal-dialog"> <div class="modal-content"> **here goes the modal header body and footer** </div> </div> </div>
将绝对位置更改为相对。
.modal-backdrop { position: relative; /* ... */ }
您也可以从.modal-backdrop中删除z-index。 产生的CSS看起来像这样。
.modal-backdrop { } .modal-backdrop.in { opacity: .35; filter: alpha(opacity=35); }
在你的模式中使用这个：
data-backdrop="false"
我发现的是：
在bootstrap 3.3.0中是不正确的，但是在bootstrap 3.3.5中是正确的。 3.3.0：
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') .prependTo(this.$element)
3.3.5
this.$backdrop = $(document.createElement('div')) .addClass('modal-backdrop ' + animate) .appendTo(this.$body)
我有一个更轻，更好的解决scheme..
它可以通过一些额外的CSS样式轻松解决..
-
隐藏类
.modal-backdrop（从Bootstrap.js自动生成）.modal-backdrop { display:none; visibility:hidden; position:relative } -
将
.modal的背景设置为半透明的黑色背景图像。.modal { background:url("u/11361/BlackTransparentBackground.png") // translucent image from google images z-index:1100; }
如果你有一个要求需要模式在一个元素内而不在</body>标签附近的要求，这个效果最好。
$('.modal').insertAfter($('body'));
就我而言，我有一个包装以下内容：
.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}
只删除了z-index：1，不知道为什么解决这个问题。 也肯定删除相对位置，但我需要它。
在我的情况下，原因是boostrap.min.css :)一旦我排除它形成我的html文件作为参考，对话框显示模式阴影forn 🙂
我删除了模态背景。
.modal-backdrop { display:none; }
这不是更好的解决scheme，但为我工作。
我是通过添加下面的样式到DIV标签来解决这个问题的
style="background-color: rgba(0, 0, 0, 0.5);"
并添加自定义的CSS
.modal-backdrop {position: relative;}
这将覆盖所有的模式，而不会搞乱任何animation或预期的行为。
$(document).on('show.bs.modal', '.modal', function () { $(this).appendTo('body'); });
尝试覆盖类.modal打开溢出值从隐藏到可见。
.modal-open { overflow: visible; }
试试这个https://github.com/nakupanda/bootstrap3-dialog/releases/tag/v1.34.0
Bootstrap Modal 3.3.0在主元素内部生成模态背景，而之前它被附加到body元素。
希望这可以帮助。
