本文主要来学习一下JavaScript插件--弹出框。
为页面内容添加一个小的覆盖层，就像iPad上的效果一样，为页面元素增加额外的信息。
先来看几个简单的静态案例效果图
效果比较简单主要就是静态的弹出的小窗体，分为窗体标题和窗体内容。
<div class="arrow">
<h3 class="popover-title">Popover top
<div class="popover-content">
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<div class="popover right">
<div class="arrow">
<h3 class="popover-title">Popover right
<div class="popover-content">
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<div class="popover bottom">
<div class="arrow">
<h3 class="popover-title">Popover bottom
<div class="popover-content">
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<div class="popover left">
<div class="arrow">
<h3 class="popover-title">Popover left
<div class="popover-content">
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<div class="clearfix">
但是我们还是需要给元素设置简单的基本布局
position: relative; display: block; float: left; width: 240px; margin: 20px;
}
先来看效果图
看代码，其实也很简单。
[code][code]
就一个a标签，但是赋予了按钮的样式类，然后给与几个属性，主要用于展示弹出框的：
第一个：data-original-title ——标题
第二个：data-content——内容
第三个：data-placement——位置（上下左右top、bottom、left、right）
不过现在如果你来运行，按钮是有了，你点击按钮弹出框被不会出现，原来很简单，就是我们还没有给它初始化，就像上一节中的tooltip一样的。
只需要添加简单的JavaScript代码就可以了。
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 左侧弹框
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 上方弹框
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 下方弹框
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 右侧弹框
然后用JavaScript来激活
$("[data-toggle=popover]").popover();
出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说你必须自己初始化他们。
当提示框与.btn-group 或 .input-group联合使用时，你需要指定container: 'body'选项（见下面的文档）以避免不需要的副作用（例如，当弹出框显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
为了给disabled 或.disabled元素添加弹出框时，将需要增加弹出框的页面元素包裹在一个 $('#example').popover(options) 可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-animation=""。 方法 $().popover(options) 为一组元素初始化弹出框。 $('#element').popover('show') 显示弹出框。 $('#element').popover('hide') 隐藏弹出框。 $('#element').popover('toggle') 展示或隐藏弹出框。 $('#element').popover('destroy') 隐藏并销毁弹出框。 事件 }) 如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题： 插件使用教程 以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。中，然后对这个
元素应用弹出框。
用法
通过JavaScript启用弹出框：
选项
alert(1);
猜你在找的Bootstrap相关文章