是否可以将 id 分配给 Twitter Bootstrap 弹出窗口？答案

【问题标题】：Is it possible to assign an id to a Twitter Bootstrap popover?是否可以将 id 分配给 Twitter Bootstrap 弹出窗口？
【发布时间】：2012-09-28 01:13:41
【问题描述】：

我已经能够显示 Twitter Bootstrap 弹出框，但是有没有办法在创建时为它们分配 ID，以便我可以操纵它们？

到目前为止，这是我的代码： .js

$('#test-button').popover({content:'test.', trigger:'click'});
$('#test-button').popover('show');

.html

<a id='test-button' rel='popover'>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

您可以使用几个选项来获取弹出框元素：

1) 修改 Boostrap Popover 以接受选项对象上的 id 属性并将其注入到模板中（第 102 行）

2) 使用 id 设置弹出框选项的 html 属性，例如

$('#test-button').popover({html: true, content: '<div id="test-popover-content">... </div>'})

然后通过

访问popover容器

var testPopover = $('#test-popover-content').parent().parent();

【讨论】：

这实际上应该是：$('#test-button').popover({html: true, content: '<div id="test-popover-content">... </div>'})

【解决方案2】：

最简单的方法是使用您想要的 id 指定 template。

创建弹出框时使用的基本 HTML。

弹出框的标题将被注入到 .popover-title 中。

popover 的内容将被注入到 .popover-content 中。

.arrow 将成为弹出框的箭头。

最外层的包装元素应该有 .popover 类。

这是默认模板值：

 '<div class="popover" role="tooltip">
     <div class="arrow"></div>¸
     <h3 class="popover-title"></h3>
     <div class="popover-content"></div>
  </div>'

你可以这样使用它

$(#your-pop-over).popover({
     template:'<div id="your-id" class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'       
    });

【讨论】：

小心——您不能在 .popover 容器上设置 ID，因为它会被覆盖为 #popover50000 之类的内容。