弹出提示框高级玩法"/>
爱坤快来看,基于BootSharp5.2 弹出提示框高级玩法
爱坤快来看!基于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=".1.4/jquery.min.js"></script><link href="@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"><script src="@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>
坑点1:新版API变化
坑点2:
坑点3:
应用:聊天气泡点击后,弹出提示框,有复制,点赞,评论按钮等,更多玩法就看你怎么挖掘
更多推荐
爱坤快来看,基于BootSharp5.2 弹出提示框高级玩法
发布评论