bootstrap的popover组件

最新推荐文章于 2024-07-09 08:29:27 发布

weixin_33904756

最新推荐文章于 2024-07-09 08:29:27 发布

阅读量95

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2391658/blog/1499652

版权

2019独角兽企业重金招聘Python工程师标准>>>

使用方法：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 弹出框（Popover）插件</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="padding: 100px 50px 10px;" >
	<button type="button" class="btn btn-default" title="Popover title"  
			data-container="body" data-toggle="popover" data-placement="left" 
			data-content="左侧的 Popover 中的一些内容">
		左侧的 Popover
	</button>
	<button type="button" class="btn btn-primary" title="Popover title"  
			data-container="body" data-toggle="popover" data-placement="top" 
			data-content="顶部的 Popover 中的一些内容">
		顶部的 Popover
	</button>
	<button type="button" class="btn btn-success" title="Popover title"  
			data-container="body" data-toggle="popover" data-placement="bottom" 
			data-content="底部的 Popover 中的一些内容">
		底部的 Popover
	</button>
	<button type="button" class="btn btn-warning" title="Popover title"  
			data-container="body" data-toggle="popover" data-placement="right" 
			data-content="右侧的 Popover 中的一些内容">
		右侧的 Popover
	</button>
</div>
<script>
$(function () { 
	$("[data-toggle='popover']").popover();
});
</script>

</body>
</html>

点击效果：

Bootstrap的popover(弹出框)在append后弹不出解决办法：

var testHtml = "<button type='button' class='btn btn-default' data-container='body' data-toggle='popover' data-placement='top' data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'>"+
    "Popover on 顶部"+
   "</button>"
 
$("body").append(testHtml);
$('[data-toggle="popover"]').popover(); //创建popover（弹出框）DOM后立即初始化

转载于:https://my.oschina.net/u/2391658/blog/1499652