弹出框，顾名思义就是当你点击一个按钮或者其他地方的时候，弹出一个有内容的框，使用非常广泛。今天，我们仍然教你如何用bootstrap编写一个弹出框。
打开HBuilder创建一个新项目，在这里命名为demo，位于桌面上。
然后下载引导插件，然后解压缩，并移动带有后缀的插件。js到演示项目的js文件，剩下的到演示项目的css文件。
打开index.html并开始编码。
首先，引用插件。代码如下:
如何在报价后创建弹出框？
简单回顾一下，在上一篇文章中，当我们创建提示框时，我们可以使用or标记元素，并通过data- attribute声明提示框的信息
与工具提示相比，弹出框Popover多了一个内容，因此这里使用数据内容来定义弹出框中的内容。也可以使用或标签制作，如下所示
class="btnbtn-default "
数据容器=“正文”
数据放置=“底部”
data-toggle="popover "
数据-原始-标题=“引导弹出框标题”
数据内容=“引导弹出窗口的内容”>
用力打我
数据容器=“正文”
数据放置=“右”
data-toggle="popover "
标题=“引导弹出标题”
数据内容=“引导弹出窗口的内容”>
用力打我
Bootstrap框架中的触发弹出框和提示框一样，不能直接由HTML的自定义数据属性触发。需要依赖JavaScript脚本。
最简单的触发方式如下:
注意:在上面的方法中，注意使用数据-来设置弹出框的属性。
${
$.波波夫；
});
编写完代码后，让我们看看运行结果，如图所示:
然后可能有人会问你能不能延迟弹匣的弹出时间。
那么，这里可以使用“数据触发”和“数据延迟”。代码如下:
class = " BTN BTN-默认值"
data-toggle="popover "
数据放置=“底部”
Title= "左侧提示框"
数据内容=“我是弹出延迟显示”
data-trigger=“悬停”
数据延迟="600 " >
用力打我
因为延迟显示无法显示截图，所以这里就不放图了。
那么我们如何改变它的弹出方向呢？
结合我们在上一篇文章中谈到的提示框，我们应该知道它可以通过“数据放置”来更改，如下所示:
数据放置=“顶部”
数据放置=“右”
数据放置=“左侧”
除了元素标签触发，我们还有哪些方法？
让我给你介绍另一种方法，如下:
class = " BTN BTN-默认值"
id="myPopover " >
用力打我
${
$.波波夫；
});
我们今天到此结束。有什么不懂的可以留言或者私信问我，有不足之处请指出。谢谢你。
