时间戳

首页 > 解决方案 > 有人可以在这里解决我的引导弹出问题吗？

bootstrap-4 - 有人可以在这里解决我的引导弹出问题吗？

问题描述

我正在尝试使用 bootstrap 4 制作电子商务网页。我想让我的产品图片显示一个弹出窗口，以使用 bootstrap popover 对其进行描述。但它不会显示。我什至删除了所有代码并尝试使用引导程序中的启动模板，但仍然无法正常工作。

这是我的弹出框代码：

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

这是我的js：

<script type="text/javascript">
$(function () {
    $('.example-popover').popover({
        container: 'body'
    })
})
</script>

标签： bootstrap-4bootstrap-popover

解决方案

在您的按钮中添加example-popover类名它将起作用

 $('.example-popover').popover({
        container: 'body'
    })
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <button type="button" class="btn btn-lg btn-danger example-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

推荐阅读