如何解决Bootstrap 5 动态弹出框
我一直在寻找一种动态加载弹出框内容的方法,并想到了调用一个函数来拉取生成的 div 的 id 并将新内容注入到那里的想法。
不确定我是在重新发明轮子还是会产生意想不到的后果。有没有更好的方法来做到这一点?
<a
onmouseover="change('pop')"
data-bs-toggle="popover"
id="pop"
title="Title"
data-bs-content="Content"
>Text</a>
<script>
function change(id) {
var a = document.getElementById(id);
var b = a.getAttribute("aria-describedby");
var body = document.getElementById(b).querySelector(".popover-body");
var header = document.getElementById(b).querySelector(".popover-header");
// here you can get body and header by ajax or fetch
body.innerHTML ="New Body<br>Line 2";
header.innerHTML ="New Title";
}
new bootstrap.Popover(document.body,{ selector: '[data-bs-toggle="popover"]',trigger:'hover focus' });
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。