javascript - Bootstrap：模态框上的弹出框

Question

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

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

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

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

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

在此处输入图像描述

score 9 · Accepted Answer

Bootstrap 的人将此问题确定为一个错误，并在下一个版本中修复了它。在此处查看更多详细信息

score 8 · Accepted Answer

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

.popover {
    z-index: 1060;
}

score 5 · Accepted Answer

同时，您可以尝试：

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

5 回答 5