如何检查Twitter引导程序弹出窗口是否可见？

Question

我有一个$('#anElement')附有潜在popover 的元素,比如

<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div>

我只是想知道如何检查popover是否可见:如何使用jQuery实现这一点？

Answer 1

如果此功能未构建到您正在使用的框架中(它不再是Twitter引导程序,只是引导程序),那么您将必须检查生成/修改的HTML以创建引导程序的此功能.

看一下popupver文档.那里有一个按钮,您可以使用它来查看它的实际效果.这是检查场景背后的HTML元素的好地方.

破解你的chrome开发人员工具或firebug(firefox)并查看它发生了什么.看起来<div>按钮后面只插入一个插件 -

<div class="popover fade right in" style="... />

您所要做的就是检查该元素是否存在.根据你的标记写法,你可以使用这样的东西 -

if ($("#popoverTrigger").next('div.popover:visible').length){
  // popover is visible
}

#popoverTrigger 是触发该弹出窗口首先出现的元素,正如我们在上面注意到的那样,bootstrap只是在元素后附加popover div.

Answer 2

在boostrap popover插件中没有明确实现的方法,因此您需要找到解决方法.这是一个黑客,它将返回true或false,插件是否可见.

var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in');
console.log(isVisible); // true or false

它访问popover插件存储的数据,该插件实际上是一个Popover对象,调用tip()负责获取tip元素的对象的方法,然后检查返回的元素是否具有类in,这表示附加到该元素的popover是可见的.

您还应检查是否附加了弹出框以确保您可以调用该tip()方法:

if ($('#anElement').data('bs.popover') instanceof Popover) {
  // do your popover visibility check here
}

Answer 3

在当前版本的 Bootstrap 中，您可以检查您的元素是否已aria-describedby设置。该属性的值为id实际弹出框的值。

因此，例如，如果您想更改可见弹出框的内容，您可以执行以下操作：

var popoverId = $('#myElement').attr('aria-describedby');
$('#myElement').next(popoverid, '.popover-content').html('my new content');