引导弹出窗口未显示在所有元素之上

Posted 2023-02-22

【中文标题】引导弹出窗口未显示在所有元素之上

【英文标题】：bootstrap popover not showing on top of all elements

【发布时间】：2012-12-11 02:49:02

【问题描述】：

我正在开发一个引导站点，在从 2.0 更新到引导 2.2 后，除了弹出框之外，一切正常。

弹出框仍然可以正常显示，但它们不会显示在所有其他元素之上。

<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
     <div>  //popover shows on top of this
          <div> //popover shows on top of this
               //link here with popover in it.
          </div>
     </div>
</div>

任何人都知道为什么弹出框的行为会发生变化，或者我该如何解决？谢谢。

【问题讨论】：

我用这个脚本找到了我的解决方案。 ***.com/a/64905483/6128573

【参考方案1】：

这可能与 variables.less 上的 z-index 主列表有关。一般来说，请确保您的 variables.less 文件正确且是最新的。

【参考方案2】：

最可能的原因是弹出框上显示的内容具有更高的z-index。如果没有精确的代码/样式，我可以提供两种选择：

您应该尝试使用网络检查器（通常在您最喜欢的浏览器上按 F12）精确定位元素并检查它们的实际 z-index。

如果你找到这个值，你可以设置它低于弹出框，即z-index: 1010; by default

---

或者另一种不太好的方法是增加弹出框的z-index。您可以使用 Less 文件中的 @zindexPopover 或直接覆盖

.popover 
    z-index: 1010; /* A value higher than 1010 that solves the problem */

---

如果您找不到解决方案，您应该尝试以this jsfiddle 之类的方式重现该错误 - 您可能会在尝试获取该错误时解决该问题。

【讨论】：

如果我没有找到它，我会尝试制作一个 jsfiddle 并回发，但我尝试将弹出框的 z-index 设为 9999，但没有成功。

感谢您指出弹出框的默认 z-index 值。

【参考方案3】：

我刚刚遇到了与此类似的情况，涉及启用了滚动的 DataTables JQuery 库。

结果与 Z 索引无关，而是与将 CSS 溢出属性设置为隐藏的封闭 div 之一有关。

我通过向我的元素添加一个触发弹出框的事件来修复它，这也将负责的 div 的溢出属性更改为可见。

【讨论】：

你是救生员！！我读到的所有答案都是关于 z-index 的，老实说，这对我来说是唯一有意义的事情，但最后，在我决定尝试你的 z-index 无关答案之前，这些建议都没有奏效！谢谢

【参考方案4】：

我可以通过在 html 元素上设置 data-container="body" 来解决问题

HTML 例子：

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

javascript 示例：

$('your element').tooltip( container: 'body' ) 

从此链接发现：https://github.com/twitter/bootstrap/issues/5889

【讨论】：

这真的很有帮助。我在弹出框初始化中进行了以下更改并且它起作用了： $('#element').popover( container: 'body', //other parameters );

我得到了该链接的 404。请更新？

@NoBrainer 似乎找不到它的新链接，但是将 data-container="body" 添加到 html 元素应该可以工作，或者通过 javascript 传入 container: 'body' 也应该工作

添加 data-container="body" 似乎在 bootstrap 3 中也适用于工具提示，例如在溢出时

虽然这解决了最初的 z-index 问题，但一旦您开始在屏幕上拖动东西、放大或缩小或调整窗口大小，弹出框就不会与原始触发元素保持一致。自己寻找更好的答案。

【参考方案5】：

我在 2 个固定元素上遇到了类似的问题 - 即使 z-index heirachy 是正确的，引导工具提示隐藏在 z-index 较低的一个元素后面。

添加 data-container="body" 解决了该问题，现在可以按预期工作。

【参考方案6】：

这对我有用

$().popover(container: 'body')

【讨论】：

这对我也有用。了解需要为“容器”属性设置什么值很重要。仅供参考，从引导弹出框文档复制的内容 - “当您在父元素上有一些样式干扰弹出框时，您需要指定一个自定义容器，以便弹出框的 HTML 出现在该元素中。”跨度>

【参考方案7】：

如果 data-container="body" 不起作用，请尝试其他两个属性：

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

z-index 应该是最大限制。

【参考方案8】：

如果您使用 angular uib-bootsrap，最好的解决方案是对 $uibTooltipProvider 使用依赖注入，您可以更改所有工具提示的工具提示和弹出框的默认行为方式。

$uibTooltipProvider.options(
  appendToBody: true
);

$uibTooltipProvider 通过 $uibTooltipProvider，您可以更改工具提示和弹出框的默认行为方式；上面的属性总是优先的。可以使用以下方法：

setTriggers(obj)（示例： 'openTrigger': 'closeTrigger' ）- 使用您自己的映射扩展上述默认触发器映射。

选项(obj) - 为某些工具提示和弹出框属性提供一组默认值。目前支持带有 C 标志的。

【参考方案9】：

只是使用

$().popover(container: 'body')

在 BootstrapDialog 模式上显示弹出框时可能还不够，它也使用 body 作为容器并具有更高的 z-index。

我附带了这个使用 Bootstrap3 内部的修复程序（可能不适用于 2.x / 4.x），但大多数现代 Bootstrap 安装都是 3.x。

self.$anchor.on('shown.bs.popover', function(ev) 
    var tipCSS = self.$anchor.data('tipCSS');
    if (tipCSS !== undefined) 
        self.$anchor.data('bs.popover').$tip.css(tipCSS);
    
    // ...
);

这样不同的popovers可能有不同的z-index，一些在BootstrapDialog模式下，而另一些在它上面。

【参考方案10】：

就我而言，我必须使用弹出框模板选项并将我自己的 css 类添加到模板 html：

        $("[data-toggle='popover']").popover(
          
            container: 'body',
            template: '<div class="popover top-modal" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
       );

CSS：

.top-modal 
  z-index: 99999;

【参考方案11】：

<div class="testDiv">
<a tabindex = "-1" id="testPop" title="stuff" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-container=".testDiv">
 <i class="fa fa-info-circle"></i>
</a>

</div>

以上答案很有帮助，因为在 data-container 中设置值完成了这项工作，但如果我设置 data-container="body" 那么它在我的情况下无法正确对齐。所以我指定了popover的父div的类，它工作得很好。

html

data-container=".testDiv"

js

$("#testPop").popover(container: '.testDiv')

【参考方案12】：

data-container="body" 和 z-index 解决的问题：

<div class="button btn-align"
     data-container="body"  
     data-toggle="popover"
     data-placement="top"
     title="Top"
     data-trigger="hover"
     data-title-backcolor="#fff"
     data-content="A top aligned popover is a really boring thing in the real life."
>Top</div>

.ggpopover.in 
    z-index: 9999 !important;

【参考方案13】：

许多年后，但像我一样，其他人可能会搜索这个。考虑到所有更新，所有这些都可以通过 JavaScript 中的正确初始化选项来解决。

$('.tip').tooltip(
    boundary: 'viewport',
    placement: 'top',
    container:'body',
    sanitize: true,
    appendToBody: true
);

这些设置解决了所有可能的问题。我的工具提示闪烁，仅显示页面上一半的项目，从上到左不断跳跃，各种奇怪。但是有了这些设置，一切都解决了。希望它对任何寻找的人有所帮助。

【讨论】：

是的，它发生了..我只是复制并粘贴，它解决了我将弹出框放在顶部时遇到的问题...容器：身体不起作用，密切改变任何东西的样式相关的不起作用..我不知道这里有什么魔力，也没有时间去了解，但它确实起作用了:)谢谢:)

【参考方案14】：

  $('[data-toggle="popover"]').popover(
        placement: 'top',
        boundary: 'viewport',
        trigger: 'hover',
        html: true,
        content: function () 
            let content = $(this).attr("data-popover-content");
            return $(content).html();
        
    );,



`placement`: 'top',
`boundary`: 'viewport'
both needed

【参考方案15】：

当父元素上的某些样式会干扰弹出框时，您需要指定一个自定义容器，以便弹出框的 HTML 出现在该元素中。

例如说一个弹出框的父级是 body 然后你可以使用。

    <a href="#" data-toggle="tooltip" data-container="body"> Popover One </a>

其他情况可能是当弹出框放置在某个其他元素内并且您希望在该元素上显示弹出框时，您需要在数据容器中指定该元素。 例如：假设我们在一个 id 为“modal-two”的引导模式中有弹出框，那么您需要将“data-container”设置为“modal-two”。

    <a href="#" data-toggle="tooltip" data-container="#modal-two"> Popover Two </a>

【参考方案16】：

给我 2 美分， 我的问题既不是容器也不是像上面其他解决方案那样的 z-index，而是在转换中设置的不透明度。

.popoveropacity:1 

解决了我的问题。