Css 引导模式坐在背景后面
所以我的问题和以前几乎完全一样，但我认为我的问题是因为我已经放置了几个div来创建一个滑动导航面板 以下是我的确切设置： 奖励：如果您愿意，可以随意获取滑动面板的代码：） z索引不应该冲突，它们的值将显示它们正确地堆叠，但从视觉上看它们不是 单击“打开模式”按钮后，Css 引导模式坐在背景后面,css,twitter-bootstrap,modal-dialog,z-index,Css,Twitter Bootstrap,Modal Dialog,Z Index,所以我的问题和以前几乎完全一样，但我认为我的问题是因为我已经放置了几个div来创建一个滑动导航面板 以下是我的确切设置： 奖励：如果您愿意，可以随意获取滑动面板的代码：） z索引不应该冲突，它们的值将显示它们正确地堆叠，但从视觉上看它们不是 单击“打开模式”按钮后，将覆盖所有内容！（您必须重新运行代码才能重置它） 我不知道怎么补救这个…有什么想法吗 尽管.modal的z索引高于.modal background的z索引，但.modal位于父分区#content wrap中，其z索引低于.moda
我不知道怎么补救这个…有什么想法吗 尽管
.modal.modal background.modal#content wrap.modal background.modal backgroundbody div#fullContainer#content wrap#ctrlNavPanelz索引，则一切似乎都正常
body div#fullContainer #content-wrap {
background: #ffffff;
bottom: 0;
box-shadow: -5px 0px 8px #000000;
position: absolute;
top: 0;
width: 100%;
}
#ctrlNavPanel {
background: #333333;
bottom: 0;
box-sizing: content-box;
height: 100%;
overflow-y: auto;
position: absolute;
top: 0;
width: 250px;
}
注意：我认为您最初可能已经在#content wrap和#ctrlNavPanel上使用了z索引，以确保nav位于后面，但这不是必需的，因为在HTML中nav元素位于内容wrap之前，所以您只需要定位它们，而不需要显式地设置堆叠顺序
编辑
随着Schmalzy的兴起，这些链接不再是可点击的。这是因为完整的容器是100%宽的，因此涵盖了导航。解决此问题的最快方法是将导航放置在该div中：
<div id="fullContainer">
<aside id="ctrlNavPanel">
<ul class="nav-link-list">
<li><label>Menu</label></li>
<li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li>
<li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
<li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
</ul>
</aside>
<div id="content-wrap">
...
</div>
</div>
只需将整个模式从代码的其余部分移到最底层即可。它不需要嵌套在除主体之外的任何其他元素中
<body>
<!-- All other HTML -->
<div>
...
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
...
</div>
</body>
...
...
他们在文档中暗示了这个解决方案
模式标记放置
始终尝试将模态的HTML代码放在文档的顶层位置，以避免其他组件
影响模态的外观和/或功能
在我的例子中，我可以通过为.modal background
.modal-backdrop {
z-index: -1;
}
尽管这是可行的，表单控件似乎仍然出现在背景之上，单击任意位置都会取消模式，但它看起来不太好
对我来说，更好的解决方法是绑定到所显示的事件（一旦页面加载），并更正z-index属性
$('.modal').on('shown.bs.modal', function() {
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
在这种情况下，如果您同意更改模式上的DOM，请显示：
$('.modal').on('shown.bs.modal', function() {
//Make sure the modal and backdrop are siblings (changes the DOM)
$(this).before($('.modal-backdrop'));
//Make sure the z-index is higher than the backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
只需删除z-index:1040
从这个文件bootstrap.css
class.modal background
这个问题的另一个解决方案是添加z-index:0to.modal background类。
.modal-backdrop {
z-index: -1;
}
添加了它，工作没有问题几天来，我一直在与同样的问题作斗争。。。我找到了三个可行的解决方案，但我不知道哪一个是最理想的，如果有人告诉我，我将不胜感激
修改将在bootstrap.css中进行
备选案文1：
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040; <- DELETE THIS LINE
background-color: #000000;
}
我使用了选项2。在我的例子中，我的一个父母为我制作了动画，并且有这个
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 100;
}
这里的拦截器是动画填充模式：两者都有。我不能将模式移到外面，所以解决方案是将“动画填充模式”覆盖到动画填充模式：无。动画仍然很好。因为我没有机会移动模式标记，因为我在条件中的部分模板中添加了它。对我来说，下面是添加CSS
.modal.fade {
display: none;
}
然后，当boostrap通过jsapply display:block添加类“in”时，一切正常。没有一个答案对我来说足够有效。
问题似乎出在模态窗口需要位于车身外部的位置，这不是最好的
因此，这段代码完美地完成了这项工作：
$（'.modal'）。插入后面（$（'body'）我发现在引导过程之后应用ionic framework（ionic.min.cs）对我来说是一个问题。如果你不能将模态放在根目录下（如果你使用angular，并且模态在控制器中），修改引导过程或使用js显然是一个糟糕的解决方案
所以说你有你的网站结构：
//not working
<div>
<div>
<div>
<modal></modal>
</div>
</div>
</div>
//不工作
打开您的代码检查器并将模式移动到根目录，它应该可以工作（但不在您想要的位置）：
//应该正在工作
现在把它放在第一个div中，检查它是否工作：如果是，检查下一个孩子，直到它不工作，并找到问题所在的div
//should be working
<div>
<div>
<div>
</div>
</div>
<modal></modal>
</div>
//应该正在工作
一旦您知道哪个div是问题所在，您就可以使用css显示和位置使其工作
每个人都有不同的结构，但在我的例子中，将父对象设置为display:table
是解决方案吗？将此代码放在您想要的任何地方
$('.modal').on('shown.bs.modal', function () {
var max_index = null;
$('.modal.fade.in').not($(this)).each(function (index , value){
if(max_index< parseInt( $(this).css("z-index")))
max_index = parseInt( $(this).css("z-index"));
});
if (max_index != null) $(this).css("z-index", max_index + 1);
});
$（'.modal'）.on（'show.bs.modal'，函数（）{
var max_index=null；
$（'.modal.fade.in'）。不是（$（this））。每个（函数（索引，值）{
if（max_index
如果您确实不需要背景，请尝试移除背景。（data background=“false”）：
没有背景
//should be working
<div>
<div>
<div>
</div>
</div>
<modal></modal>
</div>
$('.modal').on('shown.bs.modal', function () {
var max_index = null;
$('.modal.fade.in').not($(this)).each(function (index , value){
if(max_index< parseInt( $(this).css("z-index")))
max_index = parseInt( $(this).css("z-index"));
});
if (max_index != null) $(this).css("z-index", max_index + 1);
});
<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">No Backdrop</h3>
</div>
<div class="modal-body">
<p>
Look! No backdrop here!
</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary">Ok</button> </div>
</div>
</div>
</div>
$(".modal-backdrop").appendTo("main");
<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
<!-- magic container-->
<div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body">
....
</div>
</div>
</div>
</div>
.modal-backdrop{z-index: -1}// or you can disable modal-backdrop
.modal-holder.modal-backdrop{z-index: 100}
.modal-holder + .modal-dialog {z-index: 1000}
<div
class="modal fade stick-up disable-scroll"
id="filtersModal"
tabindex="-1"
role="dialog"
aria-labelledby="filtersModal"
aria-hidden="false"
style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>
Adding style="" and data-backdrop false would fix it.
... some html in layout page ...
@RenderSection("bottomHTML", required: false)
</body>
</html>
@section bottomHTML
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}
@{
Layout = null;
}
$("#myModal").appendTo("body");
<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
<asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
OnClick="ModalRecovery">Email</asp:LinkButton>
<asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
OnClick="ModalRecovery">Text</asp:LinkButton>
</div>
</div>
</div>
var element = $('#modalDecision');
// also taken from bootstrap 3 docs
$(element).on('shown.bs.modal', function (e) {
// keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
var backDrop = $("<div class='modal-backdrop' style='z-index:-1;opacity:.5'></div>");
$(element).append($(backDrop));
});
position: relative
z-index: 1
$(document).on('shown.bs.modal', '.modal', function () {
$('.modal-backdrop').before($(this));
});
.modal-backdrop {
/* bug fix - no overlay */
display: none;
}
$('body').on('shown.bs.modal', '.modal', function (e) {
e.stopPropagation();
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
.modal-backdrop {
/* bug fix - no overlay */
display: none;
}
.modal{
/* bug fix - custom overlay */
background-color: rgba(10,10,10,0.45);
}
$("#EditModal").modal("show");
$("#EditModal").appendTo("body");
$("#EditModal").remove();