Question

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

这是我的HTML：

<button type="button" class="btn btn-lg btn-danger" 
        data-toggle="popover" title="Popover title"
        data-content="And here's some amazing content. It's very engaging. Right?">
     Click to toggle popover
</button>

以下是我添加的所有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

来自Docs on Popovers：

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

因此，您必须在JavaScript中手动调用.popover()，如下所示：

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

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

以下是使用StackSnippets的示例。

＆＃13;

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

＆＃13;

body {
  padding: 50px;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-lg btn-danger" 
        data-toggle="popover" title="Popover title" 
        data-content="And here's some amazing content. It's very engaging. Right?">
  Click to toggle popover
</button>

＆＃13;

注意：这类似于Bootstrap Tooltip Not Showing Up

的答案

Answer 2

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

<br/>
<br/>
<a href="#" id="firstButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Working)</a>
<br/>
<br/>
<a href="#" id="secondButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Failing)</a>

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

$(function () {
    $('#firstButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
    $('#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 '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
});

Answer 3

一个强大的解决方案是 jquery的脚本脚本标记，引导程序javascript之前为popper 。

像这样

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Answer 4

所以，这对我有用。我最初在 a 函数中使用了 $("[data-toggle=popover]").popover();，就像 bootstrap 文档中建议的那样。它对我不起作用。我从函数中取出了代码片段，结果就成功了。

Bootstrap弹出窗口无法正常工作

4 个答案:

以下是使用StackSnippets的示例。