bootstrap 实现弹出框popover,动态改变popover内容

本文旨在展示如何在Bootstrap中实现点击链接或按钮后,从后台获取数据,并将这些数据动态显示在popover中,同时支持内容的换行。通过设置html属性为true并更新popover的content,可以实现popover内部的HTML渲染,从而达到内容换行的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目的:点击一个链接/按钮,后台取出数据,popover显示取出的内容


1.设置链接:

</pre><p><pre name="code" class="html"><a id="conclusionShow" href="javascript:void(0)" onclick="showConclusion2(this)">查看结论</a>


<span style="font-size:32px;color:#3366ff;">2.设置showConclusion2方法:</span>

function showConclusion2(item){
			$("#conclusionShow").popover().click(function() {
			    $("#content").text('YOUR CONTENT123');
			});
		}



3.初始化

$(function() {
			
			$("[data-toggle='popover']").popover();
});
$(document).ready(function () {
			$("#conclusionShow").popover({
			    html: true,
			    content: '<div id="content"></div>'
			});
		});



4. 实现popover内文件换行

按照上面的步骤做完,其实content取的值是div的内容,而上面设置了popover支持html,如果可以将content改成为:

$(item).popover({html: true}).click(function() {
   $("#content").html(conclusion);
});

conclusion的内容为:  测试一下<br> 换个行再来一次

即可实现popover内容换行



评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值