Bootstrap：模态框上的弹出框答案

【问题标题】：Bootstrap: popover on modalsBootstrap：模态框上的弹出框
【发布时间】：2011-12-02 06:39:03
【问题描述】：

我想使用 Twitter 的 Bootstrap CSS 库在现有的模式对话框上使用弹出效果。我将弹出框绑定到小图像图标。

$('#infoIcon').popover({
    offset: 50,
    placement: 'right'
});

模态本身也是根据文档添加的：

$('#modalContainer').modal({
    keyboard : true
});

但我得到的效果是，弹出框呈现在模态容器下方而不是模态 div 上方（请参见下面的屏幕截图）。我怎样才能让弹出框真正超越模态 div？

【问题讨论】：

【解决方案1】：

Bootstrap 的人员将此问题确定为一个错误，并在下一个版本中对其进行了修复。 see more details here

【讨论】：

【解决方案2】：

您不需要 javascript，只需通过 CSS 设置弹出框的 z-index：

.popover {
    z-index: 1060;
}

【讨论】：

【解决方案3】：

同时你可以试试：

$('#infoIcon').popover({
    offset: 50,
    placement: 'right'
});

$("#infoIcon").data('popover').tip().css("z-index", 1060);

【讨论】：

【解决方案4】：

如果你需要在飞行中工作，你应该使用

$("<style type='text/css'> .popover{z-index:1060;} </style>").appendTo("head");

【讨论】：

【解决方案5】：

尝试检查一个窗口的z-index 值是多少，并修改另一个窗口的 z-index 值。如果您使用的插件不允许在其输入参数中进行这种更改，您可以使用 jQuery css 函数执行此操作。

【讨论】：