Adds a small overlay to the page content, just like the effect on the iPad, adding extra information to the page elements.
Plug-in dependencies
The pop-up box relies on the tooltip plug-in, so the tooltip plug-in needs to be loaded first.
Opt-in feature
For performance reasons, the data attribute API of tooltip and popup components is optional, which means you must initialize them yourself.
When the pop-up box is used in a button group and input box group, additional settings are required
When the popup is used in conjunction with .btn-group or .input-group, you need to specify the container: 'body' option (see documentation below) to avoid unwanted side effects (e.g., after the popup is displayed, The page elements it works with may become wider or have rounded corners).
When using a pop-up box on a prohibited page element, you need to add an additional element to wrap it
In order to add a popup box to a disabled or .disabled element, wrap the page element to which the popup box needs to be added in a
Code snippet
.bs-example
{
border-color:#ddd;
border-radius:4px 4px 0 0;
border-width:1px;
box-shadow:none;
margin-left:0;
margin-right:0;
border-style:solid;
}
.bs-example-popover .popover {
position: relative;
display: block;
float: left;
width: 240px;
margin: 20px;
}
<h1 class="page-header">3、弹出框</h1> <div class="bs-example bs-example-popover"> <div class="popover top"> <div class="arrow"></div> <h3 class="popover-title">Popover top</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="popover right"> <div class="arrow"></div> <h3 class="popover-title">Popover right</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="popover bottom"> <div class="arrow"></div> <h3 class="popover-title">Popover bottom</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="popover left"> <div class="arrow"></div> <h3 class="popover-title">Popover left</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> </div>
Preview effect
Code snippet:
<a href="javascript:void(0)" id="a_pop" class="btn btn-danger" data-placement="bottom" data-content=" 风吹雨成花 时间追不上白马 你年少掌心的梦话 依然紧握着吗 云翻涌成夏 眼泪被岁月蒸发 这条路上的你我她 有谁迷路了吗 我们说好不分离 要一直一直在一起 就算与时间为敌 就算与全世界背离 风吹亮雪花 吹白我们的头发 当初说一起闯天下 你们还记得吗 那一年盛夏 心愿许的无限大 我们手拉手也成舟 划过悲伤河流 你曾说过不分离 要一直一直在一起 现在我想问问你 是否只是童言无忌 天真岁月不忍欺 青春荒唐我不负你 大雪求你别抹去 我们在一起的痕迹 大雪也无法抹去 我们给彼此的印记 今夕何夕 青草离离 明月夜送君千里 等来年 秋风起" data-original-title="时间煮雨" >点击加载</a>
<strong>js初始化：</strong>
<script type="text/javascript">
$("#a_pop").popover();
</script> Preview effect:
Note that when specifying placement, pay special attention to the direction. Because the pop-up box starts popping up from the center of the element that triggers the event, it may be covered and unable to be fully displayed.
The href attribute of the a tag in the code must be specified as javascript:void(0) to remove the link effect.
Four directions:
Code
<a href="javascript:void(0)" id="a_pop1" class="btn btn-danger" data-placement="left" data-content=
"
风吹雨成花 时间追不上白马
你年少掌心的梦话 依然紧握着吗
云翻涌成夏 眼泪被岁月蒸发
这条路上的你我她 有谁迷路了吗
"
data-original-title="时间煮雨"
>左侧</a>
<a href="javascript:void(0)" id="a_pop2" class="btn btn-danger" data-placement="top" data-content=
"
我们说好不分离 要一直一直在一起
就算与时间为敌 就算与全世界背离
风吹亮雪花 吹白我们的头发
当初说一起闯天下 你们还记得吗
" data-original-title="时间煮雨">
上部
</a>
<a href="javascript:void(0)" id="a_pop3" class="btn btn-danger" data-placement="bottom" data-content=
"
那一年盛夏 心愿许的无限大
我们手拉手也成舟 划过悲伤河流
你曾说过不分离 要一直一直在一起
现在我想问问你 是否只是童言无忌
" data-original-title="时间煮雨">
下部
</a>
<a href="javascript:void(0)" id="a_pop4" class="btn btn-danger" data-placement="right" data-content=
"
天真岁月不忍欺 青春荒唐我不负你
大雪求你别抹去 我们在一起的痕迹
大雪也无法抹去 我们给彼此的印记
今夕何夕 青草离离
明月夜送君千里 等来年 秋风起
" data-original-title="时间煮雨">
右侧
</a>
</div>
<script type="text/javascript">
$("#a_pop1").popover();
$("#a_pop2").popover();
$("#a_pop3").popover();
$("#a_pop4").popover();
</script>
Preview effect;
2. Options
Options can be passed via data attributes or JavaScript. For the data attribute, you need to put the option name after data-, such as data-animation="".
Apply data attribute to a single popup box
For a single pop-up box, options can be specified individually through the data attribute, as shown above.
3. Method
$().popover(options)
Initialize a popup box for a set of elements.
.popover('show')
Show popup.
$('#element').popover('show')
.popover('hide')
Hide the popup.
$('#element').popover('hide')
.popover('toggle')
Show or hide the popup.
$('#element').popover('toggle')
.popover('destroy')
Hide and destroy the popup.
$('#element').popover('destroy')
4. Events
$('#myPopover').on('hidden.bs.popover',
function
() {
//
do something…})
The above is the entire content of this article. I hope it will be helpful for everyone to learn and master the Bootstrap pop-up box.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
