坐在背景后面的Bootstrap Modal

时间：2014-01-07 22:17:08

标签： css twitter-bootstrap modal-dialog z-index

所以我遇到与@Jamescoo几乎完全相同的问题，但我认为我的问题来自于我已经定位了几个DIV以创建滑动导航面板。

这是我复制的确切设置：http://jsfiddle.net/ZBQ8U/2/

奖励：如果您愿意，可以随意获取滑动面板的代码：）

z-index不应该冲突，它们的值会显示它们正确堆叠，但在视觉上它们不是。

点击“打开模态”按钮后，<div class="modal-backdrop fade in"></div>涵盖了所有内容！ （你必须重新运行代码才能重置它）

我不知道如何补救这个...有什么想法吗？

29 个答案:

答案 0 :(得分：107)

将整个模式移到代码的其余部分之外，直到最底部。除了正文之外，它不需要嵌套在任何其他元素中。

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

Demo

他们在文档中暗示了这个解决方案。

  

模态标记位置
   始终尝试将模式的HTML代码放在文档的顶级位置，以避免使用其他组件   影响模态的外观和/或功能。

答案 1 :(得分：26)

虽然.modal的z-index高于.modal-backdrop的z-index，但.modal位于具有较低z-index的父div #content-wrap中比.modal-backdrop（z-index：1002 vs z-index：1030）。

因为父级的z索引低于.modal-backdrop，所以其中的所有内容都将位于模态之后，而不考虑给予孩子的任何z索引。

如果您删除z-index以及body div#fullContainer #content-wrap上设置的#ctrlNavPanel，则一切似乎都正常。

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-index来确保导航器位于后面，但这不是必需的，因为nav元素位于HTML中的内容包装之前，所以你只需要定位它们，而不是明确设置堆叠顺序。

修改 随着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>

DEMO HERE

答案 2 :(得分：19)

就我而言，我可以通过为.modal-backdrop

添加css来解决这个问题 
.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);
});

答案 3 :(得分：12)

这些答案对我来说都不是很好。 问题似乎在于模态窗口需要在身体外部。这不是最好的

所以这段代码完全完成了这项工作：

＆＃13;
＆＃13; 
$('.modal ').insertAfter($('body'));
＆＃13;
＆＃13;
＆＃13; 

$('#product_' + product_id + ' .modal ').insertAfter($('body'));

答案 4 :(得分：5)

在我的情况下，我的一个模态的父母是动画的，并且有这个

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 100;
}

此处的拦截器为animation-fill-mode: both;。我不能只将modal移到外面，所以解决办法是将'animation-fill-mode'覆盖到animation-fill-mode: none;。动画仍然很好。

答案 5 :(得分：4)

我有几天在同一个问题上打架......我找到了三个可行的解决方案，但我不知道，哪个是最优的，如果有人告诉我，我将不胜感激。

修改将在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：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; <- MODIFY THIS VALUE BY -1
  background-color: #000000;
}

选项3：

/*ADD THIS*/
.modal-backdrop.fade.in {
    z-index: -1;
}

我使用了选项2。

答案 6 :(得分：3)

尝试删除背景，如果你真的不需要它（data-backdrop =＆＃34; false＆＃34;）：

<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>

答案 7 :(得分：1)

此问题的另一个解决方案是，如果您不想修改bootstrap.css，请在bootstrap-dialog.css文件中将z-index: 0;添加到.modal-backdrop类。

答案 8 :(得分：1)

我知道已经晚了，我遇到了同样的问题，但我不得不如下破解它；

 .modal-backdrop {
      /* bug fix - no overlay */    
      display: none;    
}

.modal{
    /* bug fix - custom overlay */   
    background-color: rgba(10,10,10,0.45);
}

答案 9 :(得分：1)

我很谨慎地将模式内容移到其原始上下文之外：其他JS或样式可能取决于该上下文。

但是，我怀疑是否有任何脚本或样式需要背景的特定上下文。

所以我的解决方案是将背景移到模态内容附近，并强制其进入相同的堆叠上下文：

$(document).on('shown.bs.modal', '.modal', function () {
    $('.modal-backdrop').before($(this));
});

与jacoswarts'solution仅有一点偏差，因此感谢您的启发！

答案 10 :(得分：1)

如果我们不能删除背景和/或我们有组件框架这样的角度或vue我们不能将模态移动到根。我做了这个把戏：把我的自定义模态背景容器（带有aditional类）作为模态对话框容器的兄弟，并添加了一些css 

<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>

和css 

.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}

答案 11 :(得分：1)

对于那些使用 ASP.NET MVC ，

的人

需要在</body>标记之前移动模式div，但由于您使用的是布局页面而无法执行此操作

在正文标记之前的_Layout.cshtml文件中定义一个部分，例如：

... 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 ...
}

这样，模态HTML将在body标签之前呈现，现在模式应该正确显示..

答案 12 :(得分：0)

如果您嵌套了模态，这就是线索：

$('body').on('shown.bs.modal', '.modal', function (e) {
    e.stopPropagation();
    $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

答案 13 :(得分：0)

对于不允许您只移动 html/css 的框架的情况。

将模态附加到正文的末尾

$("#EditModal").modal("show");
$("#EditModal").appendTo("body");

并用

销毁 
$("#EditModal").remove();

更多信息：https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background

答案 14 :(得分：0)

只需删除背景，然后将此代码插入您的css文件

.modal-backdrop {
      /* bug fix - no overlay */    
      display: none;    
}

答案 15 :(得分：0)

我想了解这个问题，在调查了我的css之后，主要的容器（身体的直接孩子）有了：

position: relative
z-index: 1

我删除了这两个属性后，背景效果很好。如果主包装器具有position: fixed

，您可能还会遇到此问题

答案 16 :(得分：0)

这适合我。

<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));
    });

答案 17 :(得分：0)

如果你使用JQuery，你可以使用appendTo（）将模态附加到特定元素，在这种情况下，在大多数情况下，简单的一行可以将你的模态移动到背景的顶部，无论你在哪里模态div的位置

$("#myModal").appendTo("body");

这里是JQuery appendTo函数的引用： http://api.jquery.com/appendto/

我把它更新到你的小提琴 http://jsfiddle.net/ZBQ8U/240/

答案 18 :(得分：0)

除了这里的所有答案，我发现，bootstrap4＆＃34;动画fadeIn＆＃34;也导致了这个错误（背景后面没有可点击的模态）：

检查你的模态是否在以下父标签中（引导动画）

<div class="animated fadeIn"></div>

我删除了这个标签 - 为我解决了这个问题。

答案 19 :(得分：0)

首先确保模态不在任何父div中。 然后加 $（ '＃myModal'）。appendTo（ “正文”）

它对我来说很好。

答案 20 :(得分：0)

我遇到了一个类似的问题，即淡入淡出功能不起作用，并且覆盖层停留在页面上。 我将动态内容添加回页面（仅在模态操作上刷新某些内容）。 我也有这个$（'＃rejectModal - '+ itemId）.modal（'hide'）（itemId是单个页面中多个模态的动态id，用于拒绝某些信息）但问题仍然没有消失。

叠加层停留是因为我的布局在局部视图中未设置为null 设置完成后，问题就消失了：

can0 02001600 [2] 00 00 can0 07001600 [2] 00 00 can0 11001600 [2] 5C A7

答案 21 :(得分：0)

只需将你的模态移到所有div内容之外，大部分在关闭身体之前放置。

答案 22 :(得分：0)

很多时候，你无法将模态移到外面，因为这会影响你的设计结构。

背景高于你的模态的原因是父母有任何位置设置的id。

一个非常简单的方法来解决问题，然后移动你的模态外面是移动背景内部结构你有你的模态。在你的情况下，它可能是

$(".modal-backdrop").appendTo("main");

请注意，如果您的应用程序具有明确的结构，并且您无法将模式移到外部，因为它将违背设计结构，则此解决方案适用

答案 23 :(得分：0)

将此代码放在任何您想要的地方

AsyncTask

答案 24 :(得分：0)

如果您不能将模态放到根目录中（例如，如果使用角度和模态在控制器中），修改引导程序或使用 js 是显然是糟糕解决方案。

所以说你有自己的网站结构：

//not working
<div>
    <div>
        <div>
            <modal></modal>
        </div>
    </div>
</div>

打开代码检查器并将模式移动到根目录，它应该正常工作（但没有你想要的地方）：

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
</div>
<modal></modal>

现在把它放在第一个div中并检查它是否正常工作：如果是，请检查下一个孩子，直到它不能正常工作并找到问题所在的div; 

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
    <modal></modal>
</div>

一旦你知道哪个div是问题，你可以使用css显示和位置来使它工作。

每个人都有不同的结构，但在我的情况下，设置父display: table;是解决方案

答案 25 :(得分：0)

我发现在bootstrap之后应用离子框架（ionic.min.cs）来解决这个问题。

答案 26 :(得分：0)

由于我没有机会移动模态标记，因为我将其添加到条件中的部分模板中，对我有用的是添加CSS bellow 

.modal.fade {
    display: none;
}

然后，当boostrap通过js添加类“in”时，应用display：block，一切正常。

答案 27 :(得分：0)

我错过了关注html

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

添加它并且没有问题地工作

答案 28 :(得分：0)

删除z-index: 1040;

来自此文件bootstrap.css类.modal-backdrop

相关问题
最新问题