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

来源：懂视网责编：小采时间：2020-11-27 21:49:36

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

JS组件Bootstrap实现弹出框效果代码_javascript技巧:为页面内容添加一个小的覆盖层，就像iPad上的效果一样，为页面元素增加额外的信息。插件依赖弹出框依赖工具提示插件，因此需要先加载工具提示插件。选择性加入的功能出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说你必须

推荐度：

点击下载本文 文档为doc格式

导读JS组件Bootstrap实现弹出框效果代码_javascript技巧:为页面内容添加一个小的覆盖层，就像iPad上的效果一样，为页面元素增加额外的信息。插件依赖弹出框依赖工具提示插件，因此需要先加载工具提示插件。选择性加入的功能出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说你必须

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

插件依赖
弹出框依赖工具提示插件，因此需要先加载工具提示插件。
选择性加入的功能
出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说你必须自己初始化他们。
弹出框在按钮组和输入框组中使用时，需要额外的设置
当提示框与.btn-group 或 .input-group联合使用时，你需要指定container: 'body'选项（见下面的文档）以避免不需要的副作用（例如，当弹出框显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来
为了给disabled 或.disabled元素添加弹出框时，将需要增加弹出框的页面元素包裹在一个中，然后对这个元素应用弹出框。
一、静态案例
4个可选选项：top、right、bottom,和left排列。

代码段

.bs-example 
 { 
 border-color:#ddd; 
 border-radius:4px 4px 0 0; 
 border-width:1px; 
 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; 
}

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

预览效果

代码段：

点击加载

js初始化：

预览效果：

注意，当指定了placement时候，特别注意方向问题。因为弹出框是以触发事件元素中心开始弹出，很可能被覆盖而无法全部显示出来。

代码中a标签href属性必须指定为javascript:void(0)去除链接效果。

四个方位：

代码



二、选项

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





为单个弹出框应用data属性

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


三、方法

$().popover(options)
为一组元素初始化弹出框。
.popover('show')
显示弹出框。
$('#element').popover('show')

.popover('hide')
隐藏弹出框。
$('#element').popover('hide')

.popover('toggle')
展示或隐藏弹出框。
$('#element').popover('toggle')

.popover('destroy')
隐藏并销毁弹出框。
$('#element').popover('destroy')


四、事件




声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com