页面加载时如何加载Twitter Bootstrap弹出框

Question

页面加载时如何加载Twitter Bootstrap弹出框

6

我有以下的BootStrap弹出框：

<a href='#' id='example' rel='popover' data-placement='left' data-content='Its so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>HEY</a>

我希望在页面加载时显示它，因此我添加了以下代码：

$('#example').popover('show')

在文档结尾处将以下函数添加进去：

<script>
$(function ()
{ $("#example").popover(show);
});
</script>

但是没有任何反应。

在页面加载时，我什么都没有得到。然而，当我在控制台中运行$('#example').popover('show')时，弹出框可以工作。如何使弹出框在页面加载时显示？

- Charlie Davies

6个回答

3

你忘记给show加上引号了。这样做可以解决问题：

$(function () { 
  $("#example").popover('show');
});

完整的示例代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <a href='#' id='example' rel='popover' data-placement='right' data-content='Its so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>HEY</a>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
    <script>
      $(function() { 
        $("#example").popover('show');
      });
    </script>
  </body>
</html>

- zemirco

嗯...在Chrome中它对我来说运行良好。你使用开发者工具或Firebug吗？它们会立即告诉你，没有引号它是不起作用的。Uncaught ReferenceError: show is not defined。 - zemirco

是的，当我在控制台运行时，我得到了同样的结果，我添加了引号 - 一切都好了，但在页面加载时它不会触发。 - Charlie Davies

你在自己的脚本之前是否引入了jQuery？ - zemirco

是的，所有东西都加载完毕，然后这个最后运行。Jquery 在页面的其余部分正常运行。 - Charlie Davies

我编辑了我的答案，并给出了一个完整的例子，适用于Chrome和FF。确保你已经正确设置了CSS和JS文件的路径。这应该可以工作 :) - zemirco

嗯，我在Rails中运行这个程序，它是JS加载的最后一部分，但仍然没有任何反应... - Charlie Davies

0

$("#example").popover({'placement':'bottom'}).popover('show');

- Deepika Patel

0

在窗口加载后运行它，像这样：

$(window).load(function(){
  $("#example").popover('show');
});

- Tom

-1

$(document).ready(function(){

window.setTimeout("$('#example').popover('show')",1000);

}

这对我有效。试一下吧。

- shivam khandelwal

-1

使用jQuery触发那个锚点标签的点击事件，例如：

$('[id$='example' ]').trigger("click");

- dsd

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2658807 · Accepted Answer

我觉得这种方式很方便：

你可以一次性触发“显示”并设置选项：

$('#elementToPointAt').popover({
   'placement':'bottom',
   'content':'Look at me!'
}).popover('show');