bootstrap4如何设置弹出框-木庄网络博客

2022-04-15 12:56:12 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者(*-*)浩，侵删。

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。

如何创建弹出框（推荐学习：Bootstrap视频教程）

通过向元素添加 data-toggle="popover" 来来创建弹出框。

title属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容：

1	`<a href="#"` `data-toggle="popover"` `title="弹出框标题"` `data-content="弹出框内容">多次点我</a>`

注意: 弹出框要写 jQuery的初始化代码里: 然后在指定的元素上调用popover()方法。

data-placement = {left | top | right | bottom | auto} 设置弹出框的显示位置，支持多种设置，比如data-placement="auto left"时，弹出窗尽可能显示在左边,在情况不允许的情况下它才显示在右边

以下实例可以在文档的任何地方使用弹出框：

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});

完整代码:

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者