引导弹出窗口无法正常工作且没有错误
Posted
技术标签:
【中文标题】引导弹出窗口无法正常工作且没有错误【英文标题】：Bootstrap popover not working with no error 【发布时间】：2021-06-21 07:05:10 【问题描述】：我正在使用 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>我想知道我是否链接了错误版本的文件，因为引导网站在这方面没有太大帮助。
【问题讨论】：
在引导之前加载 jquery 不能解决问题 试试$(document).ready(function() 箭头函数有时会出问题
也试过了，还是有同样的问题。
您确定控制台中没有警告或错误吗？
【参考方案1】：
将data-* 属性 更改为data-bs-*（例如：data-toggle 到 data-bs-toggle 等等）并将脚本更改为下面提供的脚本以打开弹出框。
此外，请确保您正确包含Bootstrap assets，一切都应该没问题。在您的情况下，您没有包含引导 css 文件，因此弹出框将显示为 no style。您可以再次查看下面的 sn-p 了解更多详细信息。
<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 css链接在文件开头，我这里没有展示以上是关于引导弹出窗口无法正常工作且没有错误的主要内容，如果未能解决你的问题，请参考以下文章