Bootstrap 弹出框无法正常工作

Question

我正在使用 bootstrap 5 创建一个网站，我想要一个按钮，当用户单击它时会出现一个弹出窗口。

我已将 jQuery 和 popper.js 文件添加到我的文件中。但是，当我单击按钮时，什么也没有发生。我检查了控制台，它似乎没有显示任何错误。我不知道哪里出了问题。

这是我的按钮代码。

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

我想知道我是否链接了错误版本的文件，因为 bootstrap 网站在这方面帮助不大。

Answer 1

将data-* 属性更改为data-bs-*（例如：data-toggle到data-bs-toggle等）并更改下面提供的用于打开弹出窗口的脚本。

此外，请确保您正确地包含了 Bootstrap assets，一切都会好起来的。在您的情况下，您没有包含 bootstrap css 文件，因此弹出窗口会显示 无样式 。您可以再次查看以下代码片段以了解更多详细信息。

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

Bootstrap 弹出框无法正常工作

Bootstrap popover not working with no error

html

javascript

jquery

twitter-bootstrap

bootstrap-5