问题描述
我正在使用 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();
});
<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>
我想知道我是否链接了错误版本的文件,因为引导程序网站在这方面不是很有帮助。
解决方法
将 data-*
attributes 更改为 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>