Bootstrap：模态框上的弹出框

Posted 2023-05-08

【中文标题】Bootstrap：模态框上的弹出框

【英文标题】：Bootstrap: popover on modals

【发布时间】：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'> .popoverz-index:1060; </style>").appendTo("head");

【参考方案5】：

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