看了这篇文章，还对bootstrap的弹出框插件popover迷惑吗？

乐之者java

于 2020-05-13 11:48:58 发布

阅读量231

点赞数

分类专栏：前端文章标签： css javascript

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106094889

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

bootstrap本身内置了很多的插件：

我们在右边的菜单栏中可以看到诸如“模态框”、“弹出框”这类经常要用到的插件，就像bootstrap官网上所说的那样，这些插件给了bootstrap组件“生命”，让它们不再是单一的存在题，好了，不说废话了，看看我这次要使用bootstrap的弹出框插件popover做一个什么样的效果呢？最终效果如图所示：

就这样一个简单效果，下面是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="anti/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="anti/js/jquery-1.10.2.js"></script>
<script src="anti/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<title>bootstrap插件popover</title>
<style>
.popover{
	max-width: 100%;
}
</style>
</head>
<body>
		<div id="itemgrid" style="display: none">
			<table class="table table-condensed table-bordered"
			style="width:500px">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>身份证号码</th>
					<th>贷款总额</th>
					<th>申请次数</th>
					<th>是否逾期</th>
				</tr>
				<tr>
					<th>REQ0008</th>
					<th>张三</th>
					<th>1234555555</th>
					<th>333.444</th>
					<th>5</th>
					<th>是</th>
				</tr>
			</table>
		</div>
		<div style="margin:200px auto;width:200px;">
			<input type="button" class="btn btn-link" value="查询明细">
		</div>
	<script>
		$(".btn-link").popover({
			 animation:true,
			 trigger: 'click',
			  title: "明细信息",
			  html:true,
			  placement: 'auto top',
			  content: function(){
				return  $("#itemgrid").html();
			  },
			  container:'body'
		});
	</script>
</body>
</html>

解释：

1.按照官网上的说法，bootstrap官方提供的插件是可以单独引入对应的js文件的，目的就是为了减少页面的加载量，不过插件之间有的还有依赖关系，因此我们直接引入bootstrap.min.js就包含所有的了，也不用费尽心思去找单个插件对应的js文件了。

2.大家看到我在css处定义了如下css代码：