bootstrap popover中参数容器的使用？

Posted 2023-03-06

【中文标题】bootstrap popover中参数容器的使用？

【英文标题】：the usage of parameter container in bootstrap popover?

【发布时间】：2014-07-15 21:27:45

【问题描述】：

我在互联网上发现的大多数情况下，container 被设置为'body'

我遇到了什么：

bootstrap popover 显示在固定的 div 内容上，当您滚动页面时，popover 也会移动。

我将参数容器更改为我的特定 DIV #search-filter-container，没有任何变化。

更新：

即使我设置了container: '#some-my-div'，现在.popover DIV 也终于出现在正文中了

  <div class="popover fade right in" style="top: 429.5px; left: 680px; display: block;">
    code details...
  </div>
</body>

【问题讨论】：

如果您对container 参数可能有用的情况感兴趣，请查看此问题***.com/questions/19448902/…

【参考方案1】：

很难知道您在问什么，尤其是因为您没有提供任何代码示例。请阅读How do I ask a good question?

但是，为了向您展示容器选项使用的示例，我创建了一个 JSFiddle。

注释掉每一行 javascript 以查看不同的效果（在结果框架中上下滚动）。更改代码时不要忘记按运行。

html

<div style="height: 100px;">
    <br />Static text.</div>
<div style="position: fixed; width: 100%;" id="fixed-div">
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." id="popover">Popover</button>
</div>
<div style="height: 2000px;"></div>

Javascript

// comment this
$('[data-toggle="popover"]').popover(container: "body");

// uncomment this
//$('[data-toggle="popover"]').popover(container: "#fixed-div");

【讨论】：

嗨，很抱歉问的不清楚。是的，container 的用法与我之前的想法一样正确。但在我上周接手的项目中，参数container 不起作用，弹出框DIV仍然出现在body标签的最后一行。

如果您想找到问题的解决方案，您必须更加具体并包含代码。没有人可以帮助您解决“没有工作”。

再次抱歉。我的英语不好。我已经更新了我的问题，请检查一下。谢谢。

对我来说似乎是个好问题。 “这个记录不充分的框架的目的是什么”

【参考方案2】：

在容器属性中使用 CSS 选择器。

当所选容器滚动时，POLPOVER也会滚动，例如使用Opener按钮作为容器，或附近它的元素

HTML

<button type="button" class="btn btn-primary" data-container="#popover-button" data-toggle="popover" ... id="popover-button">Open popover</button>
</div>

JAVASCRIPT

$('#popover-button').popover(container: "#popover-button");