Bootstrap 引导弹出窗口不工作，无错误

7kjnsjlb 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(267)

我正在创建一个网站使用 Bootstrap 5，我想有一个按钮，当用户点击它，弹出窗口出现。
我已经将jQuery和popper.js文件添加到我的文件中。但是当我点击按钮时，没有任何React。我已经检查了控制台，它似乎没有显示任何错误。我不知道出了什么问题。
下面是我的按钮代码。

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
  Cart </i>
</button>

下面是我的jQuery代码

$(document).ready(() => {
    $('[data-toggle="popover"]').popover();   
  });

下面是我链接的jQuery和popper.js文件。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

我想知道我是否链接了错误版本的文件作为引导网站是不是很有帮助，当它来到这一点。

twitter-bootstrap

来源：https://stackoverflow.com/questions/66783275/bootstrap-popover-not-working-with-no-error

2条答案

按热度按时间

kq4fsx7k1#

将data-*属性更改为data-bs-*（例如：data-toggle到data-bs-toggle等），并将脚本更改为下面提供的脚本以打开弹出窗口。
另外，确保你正确地包含了Bootstrap assets，这样一切就都好了。在你的例子中，你没有包含引导css文件，所以弹出窗口会显示no styling。同样，你可以检查下面的代码片段以获得更多细节。

<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

</head>

<body>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
  Cart </i>
</button>



<script>

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

</script>

</body>

</html>

赞(0）回复(0）举报 2022-12-08

mwkjh3gx2#

不确定这是否太晚...但请尝试使用以下内容...
<p>This<a href="#" data-toggle="popover" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute."><i class="fas fa-shopping-cart" style="color: #fff;"></i></a> triggers a popover on click.</p>

$(document).ready(function() {
    $("body").popover({ selector: '[data-toggle="popover"]' });
});

此处提供有用的答案... https://stackoverflow.com/a/22569369/6790839

赞(0）回复(0）举报 2022-12-08

我来回答

Bootstrap 引导弹出窗口不工作，无错误

2条答案

相关问题

热门标签

最新问答