Question

对于基本的弹出按钮，我有以下代码，该代码可以正常工作：

<button type="button" class="popover-dismiss" data- container="body" data-toggle="popover" data-placement="right" data-content="This is a popover.">
    popover test
</button>

（还有这个脚本）：

<script>
    $('.popover-dismiss').popover({
        trigger: 'focus'
    })
</script>

我想修改此弹出窗口，以便单击图像时提示该消息，而不是按钮。我的图片代码是：

<img src="./images/c4dlogo.png" alt="c4d" class="icon" c4d">

有没有一种方法可以做到这一点，我该如何修改上面的代码？

Answer 1

对我有用。请参见下面的示例。

$('.popover-dismiss').popover();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<img src="http://placehold.it/150/09f/fff.png?text=c4d-Logo" alt="c4d" class="icon popover-dismiss" data-toggle="popover" title="Popover Header" data-content="This is a popover." data-placement="right">

如何将图像变成弹出按钮？

1 个答案: