教你如何编写一个弹出框

弹出框顾名思义就是点击按钮或者其它地方就会弹出一个有内容的框，而它的运用也非常广泛，而今天在这里依旧是教大家如何用bootstrap编写一个弹出框（Popover）。

打开HBuilder新建好项目，我们这里取名为demo，位置放在桌面。

然后下载好bootstrap插件，然后解压，将后缀名为.js的插件移动到demo项目js文件中，剩下的移动到demo项目css文件中。

打开index.html，然后开始进行代码编写。

先引用插件，代码如下：

引用完之后我们该如何创建一个弹出框呢？

简单回忆一下，上一篇我们在制作提示框（tooltip）时，可以使用或者标签元素，而且通过 data- 属性来声明提示框的信息

而弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用或者标签来制作，如下

class="btnbtn-default"

data-container="body"

data-placement="bottom"

data-toggle="popover"

data-original-title="Bootstrap弹出框标题"

data-content="Bootstrap弹出框的内容" >

猛击我吧

data-container="body"

data-placement="right"

data-toggle="popover"

title="Bootstrap弹出框标题"

data-content="Bootstrap弹出框的内容">

猛击我吧

Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。

最简单的触发方式如下：

注意：上面这种方法注意要使用 data- 设置弹出框的属性。

$(function(){

$('[data-toggle="popover"]').popover();

});

在代码编写之后我们来看运行结果，如图：

那么有人可能会问能不能延迟弹出框的弹出时间呢？

那么这里可以运用”data-trigger“、“data-delay“来实现，代码如下：（也一样）

class="btn btn-default"

data-toggle="popover"

data-placement="bottom"

title="提示框居左"

data-content="我是弹出框延迟显示"

data-trigger="hover"

data-delay="600">

猛击我吧

由于延迟显示无法截图演示，这里就不放图了。

那么我们如何改变它弹出方向呢？

结合上一篇我们讲到提示框，我们这里就应该知道可以通过 “data-placement"来改变它，如下：（也一样）

data-placement="top"

data-placement="right"

data-placement="left"

我们除了通过元素标签触发还有什么其它方法呢？

再给大家介绍一个方法，如下：

class="btn btn-default"

id="myPopover">

猛击我吧

$(function(){

$('#myPopover').popover({

title:"我是弹出框的标题",

content:"我是弹出框的内容",

placement:"top"

});

});

今天到这里我们就结束了，如果大家有什么不懂的地方可以通过留言或私信问我，有什么不足的地方也请大家多多指出，谢谢大家。