你如何在 twitter-bootstrap 中编程弹出框？答案

【问题标题】：How do you program popovers in twitter-bootstrap?你如何在 twitter-bootstrap 中编程弹出框？
【发布时间】：2011-10-27 23:51:29
【问题描述】：

您如何在 twitter-bootstrap 中对弹出框进行编程？我正在寻找使用 JavaScript 激活弹出框的分步说明。

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

我还不了解 JavaScript，但这是我设法实现引导弹出窗口的方法。

确保您的文档已与弹出框插件和工具提示插件链接，如果没有，请使用以下链接链接到这些文件：

    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>

将上述代码插入到正文结束标记的正上方，如下所示：

    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>

    </body>

然后在结束正文标记上方插入此脚本：

    <script type="text/javascript">
     $(function() {$("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })});

总而言之，您粘贴的代码应如下所示：

    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>

    <script type="text/javascript">
      $(function() {
      $("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })});
    </script>

    </body>

现在，为弹出功能标记您的锚标记。像这样：

<a href="#" class="pop" title="Pop!" data-content="Some Content">

解释，data-content="" 保存了弹出框的内容。 title="Pop!" 持有标题。

class="pop" 是您选择的任何类名，但请确保名称与上面脚本中找到的类名匹配，即$("a.pop")

如果你更喜欢使用id，那么应该是这样，

 <a href="#" id="pop" title="Pop!" data-content="Some Content">

还有……

    <script type="text/javascript">
      $(function() {
      $("a#pop").popover({ animation: true, placement: 'left', trigger: 'hover' })});
    </script>

此示例代码将呈现一个左侧弹出框，如果要将其弹出到另一侧，则将位置：'left'更改为即placement：'top'

【讨论】：

【解决方案2】：

我是从引导示例页面的源代码中获取的：

$(function () {
  $("a[rel=popover]")
    .popover({
      offset: 10,
      html: true
    })
    .click(function(e) {
      e.preventDefault()
    })
})

你也可以试试改这个

$("a[rel=popover]")

到应该显示弹出框的元素。

【讨论】：