标签：
Bootstrap入门（二十九）JS插件6：弹出框
加入小覆盖的内容，像在iPad上，用于存放非主要信息
弹出框是依赖于工具提示插件的，那它也和工具提示是一样的，是需要初始化才能够使用的
首先我们引入CSS文件和JS文件
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script>
首先我们来创建几个按钮来作为触发
<div class="container"> <button type="button" class="btn btn-default js-popover" data-toggle ="popover" data-placement="bottom" title="标题" data-content="内容">弹出框1</button> </div>
他的使用还需要我们在添加js代码（初始化）
（注意，这里索引的是class里面的）
<script> $(".js-popover").popover(); </script>
打开页面，点击按钮
我们也有另外的方向，只要把data-placement="bottom"里面的bottom改为left、right、top就可以了（默认是左侧）
这种情况下是点击按钮出现，点击按钮消失，有时候，我们想按空白处让它消失怎么办呢？
只需要在按钮的属性中添加一个新属性data-trigger="focus"就可以了
<div class="container"> <button type="button" class="btn btn-default js-popover" data-toggle ="popover" data-placement="bottom" title="标题" data-content="内容" data-trigger="focus">弹出框1</button> </div>
刷新页面，点击按钮，内容出现，点击空白处，消失。
其实这是默认有一个过度效果的，如果我们想要合格效果消失（也就是突然弹出突然消失），可以继续添加属性data-animation="false"就可以了
有时候我们希望当网页展示的时候就显示出来，可以修改js代码
<script> $(".js-popover").popover(‘show‘); </script>
和其他js插件一样，他有四种情况，出现前，出现后，隐藏前，隐藏后
尝试最简单的弹出提示框，这里是隐藏后
修改js代码
<script> $(".js-popover").on("hidden.bs.popover",function(e){ alert("hello"); }); </script>
刷新页面，点击按钮，让弹出框消失后，提示hello
标签：
原文地址：http://www.cnblogs.com/hnnydxgjj/p/5917915.html
