模态出现的背后固定导航栏

Question

所以我有引导的基于固定导航栏（下面你页面各处顶部），当我想显示模式弹出，它出现的导航栏的背后，如何解决网站？

它也出现在summernote模态上传图片，所以它看起来像所有的模式会出现这些导航栏的后面。

Answer 1

导航栏是固定的，这意味着Z-指数只是相对于它的孩子。简单的解决方法是简单地增加外模态容器上的上边距从导航栏稍微落后进出推下来的页面。

否则，你的情态标记在你的头坐下，你需要给它一个较高的z-index比母体导航栏的z-index的。

Answer 2

为了解决我在CSS包括为模式，背景（模态背后的阴影）超高z-index值（1000000），和模态有点高一（1000001）问题：

  .modal-backdrop {
    z-index: 100000 !important;
  }

  .modal {
    z-index: 100001 !important;
  }

希望能帮助到你！

Answer 3

这是为时已晚发布答案，但是我也有过类似的问题今天模式弹出和导航栏。

使用的JavaScript时显示弹出式窗口，反之亦然导航栏的z索引设置为零。

注：改用whateverElement.style.zIndex = 0 whateverElement.style.z-index = 0的是JavaScript的处理-的减法运算符。

Answer 4

我就遇到了这个今天与不涉及修改CSS一个替代的解决方案上来。如果您正在使用MVC，您可以使用部分标签并呈现在布局（身体任何部位）的模式。这将导致默认模式行为工作，不再隐藏它的导航栏的后面。

在_layout.cshtml（body标签内）：

<body>
    <!--... OTHER Layout/header code...-->

    @RenderSection("modals", required: false)

</body>

在您的视图：

@section modals{
    @Html.Partial("_MyModal")
}

同样的事情也将在其他语言的工作，最重要的，不需要修改CSS。

Answer 5

你需要在你的CSS调整的z-index。该z-index的为您导航是高于一切数字。因此，要调整它，你需要添加的z-index这是你的模式弹出更高。代码看起来像

例如z索引：3;

为了能够做到这一点，你必须设置为您的弹出位置。

例如位置：绝对的;

设定位置后，您也可以用把这个代码在你的CSS更加调整位置

顶：500像素;左：500px的;

这意味着，容器，你把移动从顶部500个像素，距左侧500个像素的绝对位置。

如果你无法理解的z-index是什么。我公司将提供照片给你。