在 bootstrap 弹出窗口中插入 'close button'

Question

我想知道如何为 bootstrap 弹出窗口插入 'close button'。此外，我希望弹出窗口在 x 秒后（比如 8 秒）自动关闭。

<a href='#' id='example' rel='popover' data-animation="true" data-placement='left' data-content='Its so simple to create a tooltop for my website!' title='Twitter Bootstrap Popover'></a>

在我的 JS 中，我有

    $('#example').popover({
   'placement':'bottom',
    }).popover('show');

Answer 1

关闭按钮我帮不上忙，但是如果你想在点击按钮后显示弹出窗口，然后在 8 秒后隐藏它，例如：

$("#example").popover({ trigger: "manual" }).click(function () {
    var pop = $(this);
    pop.popover("show")
    pop.on('shown.bs.popover', function () {
        setTimeout(function () {
            pop.popover("hide")
        }, 8000);
    })
});

在我的例子中，我在一个电子商务网站上使用它，所以有很多按钮可以被点击并打开弹出窗口，所以我在名为 'pop' 的按钮标签内放置了一个 class 并且代码如下：

$(".pop").popover({ trigger: "manual" }).click(function () {
    var pop = $(this);
    pop.popover("show")
    pop.on('shown.bs.popover', function () {
        setTimeout(function () {
            pop.popover("hide")
        }, 8000);
    })
});

现在，每次用户单击带有 class“弹出”按钮的任何按钮时，弹出窗口都会出现并在 8 秒后隐藏。

Answer 2

您必须覆盖模板并附加点击功能：

$('#example').popover({
  'placement': 'auto',
  'template': '<div class="popover" role="tooltip"><div class="arrow"></div><span class="btn btn-link float-right pop-close">x</span><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
}).popover('show');

$('.pop-close').click(function() {
    $('#example').popover('hide');
});

body {
  padding: 50px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<a href='#' id='example' rel='popover' data-animation="true" data-placement='right' data-content='Its so simple to create a tooltop for my website!' title='Twitter Bootstrap Popover'></a>

在 bootstrap 弹出窗口中插入 'close button'

Insert 'close button' in bootstrap popover

html

javascript

jquery

popover

bootstrap-4