Bootstrap弹出窗口无法正常工作

引导程序弹出窗口没有显示我的页面

这是我的HTML：

 Click to toggle popover  

以下是我添加的所有js和css文件：

 @Styles.Render("~/Content/css") @Styles.Render("~/Content/bootstrap.min.css") @Styles.Render("~/Content/bootstrap.css") @Styles.Render("~/Content/bootstrap-theme.css") @Styles.Render("~/Content/css/default.css") @Scripts.Render("~/Scripts/jquery-2.1.1.js") @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/Scripts/bootstrap.js") 

谁能告诉我问题出在哪里？

PS：有没有办法让popover工作而不必编写任何脚本代码？

Answer 1

来自弹出文件 ：

选择加入function：
出于性能原因，Tooltip和Popover data-apis是选择加入的，这意味着您必须自己初始化它们 。

所以你必须在JavaScript中手动调用.popover() ，如下所示：

 $("[data-toggle=popover]").popover(); 

或者你可以使用你想要的任何选择器

这是使用StackSnippets的示例。

 $("[data-toggle=popover]").popover(); 

 body { padding: 50px; } 

     Click to toggle popover  

Answer 2

虽然接受的答案很好，但在处理弹出窗口时，请注意双初始化的情况（ 小提琴示例）。 以下JavaScript将失败。

 
 
 Click Me (Working) 
 
 Click Me (Failing) 

如果您进行双重初始化并且您的弹出窗口使用可能更改的值或自定义内容等，您将处于一个受伤的世界：

 $(function () { $('#firstButton').popover({ container: "body", html: true, content: function () { return '
' + $(this).data("message") + '
'; } }); $('#secondButton').popover(); // <-- The first initializer does this, which causes the next one to fail on the next line. $('#secondButton').popover({ container: "body", html: true, content: function () { return '
' + $(this).data("message") + '
'; } }); });