如何使用JS组件Bootstrap实现弹出框效果

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

预览效果

代码段：

点击加载

js初始化： 
 
 $("#a_pop").popover(); 

预览效果：

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

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

四个方位：

代码

左侧 
  
 上部 
  
  
 下部 
  
  
 右侧 
  
  
  
  $("#a_pop1").popover(); 
  $("#a_pop2").popover(); 
  $("#a_pop3").popover(); 
  $("#a_pop4").popover(); 
 

预览效果；

二、选项
可以将选项通过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')

四、事件

$('#myPopover').on('hidden.bs.popover',
function
() {
//
 do something…})

到此，相信大家对“如何使用JS组件Bootstrap实现弹出框效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！