Bootstrap：弹出模态

Question

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

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

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

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

但是我得到的效果是，弹出窗口是在模态容器下渲染而不是模态div（参见下面的截图）。如何才能真正将弹片转移到模态div上？

Answer 1

Bootstrap的人将此问题视为一个错误并将其修复为下一个版本。 see more details here

Answer 2

你不需要javascript，只需通过CSS设置popover的z-index：

.popover {
    z-index: 1060;
}

Answer 3

同时你可以尝试：

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

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

Answer 4

如果你需要飞行，你应该使用

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

Answer 5

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