10

我的导航栏中有一个帮助按钮，具有弹出功能。

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
           <div class="nav pull-right">
               <div class="cb_inline_block">               
                   <a class="btn btn-small cb_inline_block icon timezone_help" data-content="{% trans 'hahaha' %}" rel="popover" href="#" data-original-title="{% trans 'Time Zone' %}"><i class="icon-question-sign icon-large"></i></a>

Javascript：

$(document).ready(function () { $('.timezone_help').click(show_timezone_help); };

function show_timezone_help(event){
    event.preventDefault();
    $('.timezone_help').popover('show');
}

但是当我点击它时，弹出框隐藏在导航栏后面。

我真的必须手动设置 z-index 吗？那会很痛苦。我肯定做错了什么。谢谢。

在此处输入图像描述

4

4 回答 4

19

首先，您的问题的答案是弹出框不打算在固定导航栏中使用。在variables.less中，您将找到以下 z-index 列表：

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown:          1000;
@zindexPopover:           1010;
@zindexTooltip:           1030;
@zindexFixedNavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;

如您所见，Popovers 旨在滑到固定导航栏下方。但是，您会注意到 Tooltips 不会，您也可以trigger: 'click'在 tooltips 上使用。

否则，如果您对弹出框不满意，您将不得不手动更改它的 z-index。以下将激活它并永久更改它的 z-index，因此您不必担心每次显示时都这样做，或者类似的事情：

$('.timezone_help')
  .popover({placement: "bottom"})
  .data('popover').tip()
    .css('z-index', 1030);​​​​​​​​​​​​​​​​​​​​​​​​

JSFiddle

其次，只是解释为什么我的示例似乎有效，而您的示例无效。

我们的两个示例（ mmfansler JSFiddle和houmie JSFiddle ）之间的显着差异点实际上不是 2.1.0 和 2.1.1 之间的差异。他们都有z-index: 1030固定z-index: 1010的导航栏和弹出框（这是你抱怨的）。

真正的区别在于我的 2.1.0 示例也加载了响应式代码。出于某种原因，BootstrapCDN 更改了命名约定：

  • 2.1.0 中的 bootstrap.min.css 是一个组合版本
  • 2.1.1 中的 bootstrap.min.css 仅在非响应式中

我怀疑这是一个错误，因为在我写这个bootstrap-combined.min.css时也只是无响应的！

无论如何，影响弹出显示的两者之间的唯一区别是：

.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}

然而，这条规则只适用于某些媒体查询（当然在 JSFiddle 中会被激活，因为渲染的视口很小）。

否则，当导航栏不是静态的时，您将继续看到导航栏下方的弹出框。

您可能需要关注BootstrapCDN 问题 #41

于 2012-09-09T17:25:13.223 回答
1

就我而言，我决定如下：

.navbar-fixed-top {
  z-index:1061;
}

弹出框默认为索引 1060，因此任何高于 1060 的内容都位于弹出框上方

对不起，我是巴西人，我用的是谷歌翻译

于 2017-01-09T11:46:10.963 回答
0

设置这些属性：

data-container="body" style="z-index:1000; position:relative"

z-index 应该是最大限制。

于 2015-12-19T03:31:09.540 回答
0

对我来说，我需要将弹出框的容器设置为body和 z-index

$().popover({container: 'body'})
于 2019-07-03T12:22:39.620 回答