Bootstrap弹出框无法正常工作

Question

Bootstrap弹出框无法正常工作

javascriptjquerytwitter-bootstraptwitter-bootstrap-3popover

40

Bootstrap的浮动提示框在我的页面上没有显示出来。

这是我的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：有没有一种方法可以使弹出框在不编写任何脚本代码的情况下工作？

- Rodrigo de Farias

5

你确定你的脚本已经包含正确了吗？你能在 JSFiddle 上重现这个错误吗？ - Nagy Vilmos

6个回答

15

虽然接受的答案很好，但是在处理弹出框时，请注意双重初始化的情况（示例）。以下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>

如果您进行了双重初始化并且您的弹出窗口使用可能会更改或自定义内容等值，则您将陷入困境：

$(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>';
      }
    });
});

- Alexandru

7

注意阿历克斯安德鲁所提出的“警告”。如果你使用一个通用的.js库，其中你总是使用$('[data-toggle="popover"]').popover()来选择弹出框，请特别小心。因为如果你想要稍后使用其他不同参数的弹出框，这将会每次都给你带来麻烦。 - brsfan

1

在Bootstrap 5.2中，我需要使用以下jQuery代码来初始化Popover。

<script>
        $(document).ready(function () {
            //initialize popover
            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
            const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
        });
    </script>

- Liakat Hossain

1

您可以使用Bootstrap附加功能或使用Bootstrap捆绑包来添加弹出框。但是弹出框需要手动初始化。

HTML

在弹出框中显示HTML内容。我正在显示一张图片。

<a tab-index="0" data-content="<img src='image1.jpg' class='img-fluid' alt='Image 1'/>" data-toggle="popover" >Image 1</a>

JS.

使用jQuery进行调用

$('[data-toggle="popover"]').popover({
  trigger: "hover click", // triggers on hover and click
  placement: 'auto', // auto or top or left or right
  container: 'body',
  title: '<span>X</span>',
  html: true
});

- infomasud

0

一个强大的解决方案是在引入Bootstrap JavaScript之前，先写入jQuery和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>

- user13415013

你能添加一些代码展示它会是什么样子吗？ - quicklikerabbit

0

所以，这是对我有效的方法。我最初在函数中使用了$("[data-toggle=popover]").popover();，就像Bootstrap文档中建议的那样。但它对我不起作用。我将代码片段从函数中取出，然后它就有效了。

- PKS

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

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

- KyleMit · Accepted Answer

来自Popovers文档：

选择加入功能:
出于性能方面的考虑，工具提示和弹出框数据api是选择加入的，意味着你必须手动初始化它们。

因此，你必须像这样在JavaScript中手动调用.popover()：

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

或者您可以使用任何选择器

以下是使用StackSnippets的示例。

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

body {
  padding: 50px;
}

<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>

注意：这与Bootstrap Tooltip未显示的答案类似。