JS组件Bootstrap实现弹出框效果代码

前端之家收集整理的这篇文章主要介绍了JS组件Bootstrap实现弹出框效果代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息。

插件依赖

弹出框依赖工具提示插件,因此需要先加载工具提示插件

选择性加入的功能

出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们。

弹出框在按钮组和输入框组中使用时,需要额外的设置

提示框与.btn-group 或 .input-group联合使用时,你需要指定container: 'body'选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之后,与其合作的页面元素可能变得更宽或是去圆角)。

禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来

为了给disabled 或.disabled元素添加弹出框时,将需要增加弹出框的页面元素包裹在一个
中,然后对这个
元素应用弹出框。

一、静态案例

4个可选选项:top、right、bottom,和left排列。

代码

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; } @H_404_19@
404_19@

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

@H_404_19@ @H_404_19@
404_19@

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

@H_404_19@ @H_404_19@

<div class="popover bottom">
<div class="arrow">@H_404_19@
<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.

@H_404_19@ @H_404_19@

<div class="popover left">
<div class="arrow">@H_404_19@
<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.

@H_404_19@ @H_404_19@ @H_404_19@ @H_404_19@

预览效果

代码段:

data-original-title="时间煮雨"

点击加载

@H_404_19@
js初始化:

预览效果;

二、选项

可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-animation=""。

为单个弹出框应用data属性 对单个弹出框可以通过data属性单独指定选项,如上所示。

三、方法

$().popover(options)

为一组元素初始化弹出框。

.popover('show')

显示弹出框。

隐藏弹出框。

展示或隐藏弹出框。

隐藏并销毁弹出框。

四、事件

如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:

插件使用教程

以上就是本文的全部内容,希望对大家学习掌握Bootstrap弹出框有所帮助。

猜你在找的Bootstrap相关文章