爱坤快来看，基于BootSharp5.2 弹出提示框高级玩法

本文链接：https://blog.csdn.net/qq_33945243/article/details/129115413

爱坤快来看！基于BootSharp5.2 ，弹出提示框高级玩法！！！

下面就是爱坤的聊天记录，点击后会弹出选项！

在这里插入图片描述

看看原版BootSharp5 默认的弹出框长什么样！Popovers

文档位置：BootSharp5 Popovers文档链接

在这里插入图片描述

官方文档提示框里面只有文字，但是我想要显示html代码，比如按钮代码。

下面是代码，直接复制就能用，新建一个html文件，全部复制粘贴进去。

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap5 实例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="container mt-5">
        <div class="alert alert-primary " id="card" tabindex="0" role="button" data-bs-toggle="popover">
            <div class="d-flex flex-row">
                <img decoding="async" class="img-fluid mt-2 rounded-circle" style="width: 60px;height: 60px;"
                    src="ikun.jpg">
                <p class="lead mt-3 ms-3">
                    到底美不美，真的梅狸猫，抱紧了，树枝666
                </p>
            </div>
        </div>
    </div>
</body>
<script>
    const popover = new bootstrap.Popover('#card', {
        trigger: 'fouce',
        placement: 'bottom',
        html: true,
        content: ContentMethod(),
        container: '#card'
    })

    function ContentMethod() {
        return `
        <a href="#" id="button1" class="btn btn-warning" role="button" >香精煎鱼食不食？</a>
        <a href="#" id="button2" class="btn btn-warning" role="button" >纯鹿人，没必要！</a>
        <a href="#" id="button3" class="btn btn-warning" role="button"  >素质666？</a>
        <a href="#" id="button4" class="btn btn-warning" role="button"  >真爱坤+1</a>`
    }
    $("#card").delegate('#button1', 'click', function () {
        alert("我食")
    });
    $("#card").delegate('#button2', 'click', function () {
        alert("真的纯路人！！！")
    });
    $("#card").delegate('#button3', 'click', function () {
        alert("真没素质！！！666")
    });
    $("#card").delegate('#button4', 'click', function () {
        alert("真的是真爱坤！！！")
    });

</script>


</html>
<style>
    .popover {
        max-width: 100%;
    }
</style>