Bootstrap 模态显示在固定导航条后面

yk9xbfzb 于 2023-05-11 发布在 Bootstrap

关注(0)|答案(6)|浏览(258)

因此，我有 Bootstrap 为基础的网站与固定的导航栏（以下您在页面顶部），当我想显示模态弹出，它出现在这些导航栏后面，如何修复？
和i使用margo template from graygrids
它也会出现在用于上传图片Summernote Modals中，所以看起来所有的Modals都会出现在导航栏后面。

twitter-bootstrap

来源：https://stackoverflow.com/questions/34755770/modal-appear-behind-fixed-navbar

6条答案

按热度按时间

ux6nzvsh1#

为了解决这个问题，我在CSS中为modal-backdrop（modal后面的阴影）添加了一个超高的z-index值（1000000），并为modal添加了一个更高的值（1000001）：

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

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

希望有帮助！

赞(0）回复(0）举报 2023-05-11

bjp0bcyl2#

导航栏是固定的，这意味着z索引仅相对于其子项。简单的解决方法是简单地增加外部模态容器的上边距，将其稍微向下推，并从导航栏后面向外。
否则，你的模态标记必须位于你的标头中，你需要给予它一个比父导航栏的z索引更高的z索引。

赞(0）回复(0）举报 2023-05-11

brjng4g33#

这是太晚了张贴的答案，但我有一个类似的问题，今天与模态弹出和导航栏。
使用javascript将弹出窗口显示时导航栏的z索引设置为零，反之亦然。
注意：使用whateverElement.style.zIndex = 0代替whateverElement.style.z-index = 0，因为javascript将-作为减法运算符处理。

赞(0）回复(0）举报 2023-05-11

lztngnrs4#

我今天遇到了这个问题，并提出了一个替代解决方案，不涉及修改CSS。如果你使用的是MVC，你可以使用一个section标签并在布局中呈现模态（在body的任何地方）。这将使默认模式行为正常工作，并且不再将其隐藏在导航栏后面。
On _layout.cshtml（在body标记内）：

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

    @RenderSection("modals", required: false)

</body>

在你看来：

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

类似的东西可以在其他语言中工作，最重要的是不需要修改CSS。

赞(0）回复(0）举报 2023-05-11

watbbzwu5#

你应该检查你是否添加了z-index到你的导航样式。你不必改变或调整你的模态的位置。如果处理的是固定导航，则不需要在导航样式中添加z-index，但如果是绝对导航栏，则可以添加z-index: 9;到导航，风格，而模态保持不变。希望这能帮上忙。

赞(0）回复(0）举报 2023-05-11

ajsxfq5m6#

您需要调整CSS中的z索引。导航的z索引比其他任何东西都要高。因此，要调整它，您需要添加一个z索引，这是更高的模态弹出。代码如下所示
例如，z索引：3;
为了能够做到这一点，你必须设置一个位置，以您的弹出窗口。
例如位置：绝对的;
设置位置后，您还可以调整位置，甚至更多的把这个代码在您的CSS
顶部：500 px;左侧：500 px;
这意味着您放置绝对位置的容器将从顶部移动500像素，从左侧移动500像素。
如果你不知道什么是z-index。我会给你提供一张照片。
z-index axis example

赞(0）回复(0）举报 2023-05-11

我来回答

Bootstrap 模态显示在固定导航条后面

6条答案

相关问题

热门标签

最新问答