本篇文章给大家详细介绍一下Bootstrap 中的弹出框。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
表面上看，弹出框其实就是一种特殊的提示框，只是多了一个标题而已。但实际上，还是有不同之处的。
基本用法 在制作提示框（tooltip）时，可以使用或者标签元素，而且通过 data- 属性来声明提示框的信息。而弹出框popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用 或者 标签来制作。【相关推荐：《 bootstrap教程 》】
于是最基本的用法如下
1、通过 title 属性的值来定义标题(也可以使用自定义属性 src-title 来设置标题)，title优先级高
2、通过data-content属性来设置内容
3、设置data-toggle="popover"
4、使用如下js代码进行触发
1
$('[data-toggle="popover"]').popover();
Salin selepas log masuk
点我弹出/隐藏弹出框
<script>
$(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Salin selepas log masuk
属性参数 在弹出框制作时，可以在HTML中定义下表所列的自定义属性
[注意]data-palcement默认居右显示，而不是居上显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body style="margin-top:100px">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="上侧" >上侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="标题" data-content="下侧" >下侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="无动画" data-animation="false" >无动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="有动画" >有动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="hover触发" data-trigger="hover">hover触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="click触发" data-trigger="click">click触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="不延迟">不延迟</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="延迟500ms" data-delay="500">延迟500ms</button>
<script>
$(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Salin selepas log masuk
JS触发 popover的JS用法与tooltip的用法一样，支持使用options对象的方法来向popover()方法传参
1
$(element).popover(options);
Salin selepas log masuk
options对象里的参数包括amimation、html、placement、selector、original-title、title、trigger、delay、container、template
详细情况移步至此
1
2
3
4
5
6
7
8
9
10
<body style="margin-top:50px">
<button type="button" class="btn btn-default" data-toggle="popover" >按钮</button>
<script>
$(function(){
$('[data-toggle="popover"]').popover({
title:"我是标题",
content:'我是内容'
});
});
</script>
Salin selepas log masuk
【关键字】
除了使用options对象，还可以使用关键字，'show'、'hide'、'toggle'、'destroy'
1
2
3
4
5
6
7
8
9
10
11
12
13
<body style="margin-top:100px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn4">按钮4</button>
<script>
$(function(){
$('#btn1').popover('show');
$('#btn2').popover('hide');
$('#btn3').popover('toggle');
$('#btn4').popover('destroy');
});
</script>
Salin selepas log masuk
【事件】
该插件支持5种类型的事件订阅
1
2
3
4
5
show.bs.tooltip show方法调用之后立即触发该事件
shown.bs.tooltip 此事件在tooltip已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.tooltip hide方法调用之后立即触发该事件。
hidden.bs.tooltip 此事件在tooltip被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
inserted.bs.tooltip 当tooltip模板加载到DOM中上时，在show.bs.tooltip触发后，触发该事件
Salin selepas log masuk
1
2
3
4
5
6
7
8
9
10
11
12
13
<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="标题" data-content="内容" id="btn">按钮</button>
<script>
$(function(){
$('#btn').popover();
$("#btn").on("show.bs.popover",function(e){
$(this).html('关闭');
}).on("hide.bs.popover",function(e){
$(this).html('打开');
})
});
</script>
Salin selepas log masuk
对比提示框 1、提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click
2、提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)
3、提示框 tooltip 默认居上显示，而弹出框 popover 默认居右显示
4、显示模板不同
提示框tooltip的模板：
1
2
3
4
<div class="tooltip" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>
Salin selepas log masuk
弹出框popover的模板：
1
2
3
4
5
<div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
Salin selepas log masuk
更多编程相关知识，请访问：编程教学 ！！
Atas ialah kandungan terperinci 深入了解Bootstrap中的弹出框. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk membeli dan menjual Bitcoin pada platform Ouyi
penggunaan fungsi informix
Cara menggunakan fungsi max
Terdapat beberapa cara untuk meletakkan kedudukan CSS
Bagaimana untuk menggunakan carian magnetik btbook
Bagaimana untuk membuka fail psd
Struktur Data dan Tutorial Algoritma
Bagaimana untuk mengemas kini pemacu kad grafik
akhiran peti mel google
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
