时间戳

首页 > 解决方案 > 引导弹出窗口无法正常工作且没有错误

javascript - 引导弹出窗口无法正常工作且没有错误

问题描述

我正在使用引导程序 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>

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

标签： javascripthtmljquerytwitter-bootstrapbootstrap-5

解决方案

使用（例如：to等）更改data-* 属性并将脚本更改为下面提供的脚本以打开弹出框。data-bs-*data-toggledata-bs-toggle

此外，请确保正确包含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>

推荐阅读