8.7.3 弹出框支持的属性
当使用data-*
属性定义弹出框时,Bootstrap
除了提供了data-toggle
、data-placenment
、data-content
属性之外,Bootstrap
还为弹出框提供了大量其他支持属性,下面分别介绍它们。
Bootstrap为弹出框提供的属性
属性 | 描述 |
---|---|
data-animation |
boolean 属性,用于指定是否对弹出框应用.fade 过渡效果。 |
data-container |
指定将弹出框附加到特定元素上,该属性支持各种选择器或false 值,false 值表示不附加。比如container:'body' 表明将弹出框附加到页面<body> 元素上。 |
data-content |
指定弹出框的内容。 |
data-delay |
指定延迟多少毫秒后显示或关闭弹出框;该属性支持简单数值或形如{'show':500,'hide':200} 的对象,该对象指定延迟500毫秒 显示弹出框,延迟200毫秒关闭弹出框。 |
data-html |
指定是否将HTML 代码直接转换为弹出框。该属性默认为false ,Bootstrap 先使用text() 方法处理工具提示内容,然后再添加弹出框。 |
data-placement |
指定弹出框的出现位置。该属性的默认值是'right' 。 |
data-selector |
如果指定了该属性,那么弹出框将会由该属性表示的HTML 元素负责代理。 |
data-template |
指定弹出框的HTML 模板,该属性的默认值是Bootstrap 提供的HTML 模板。 |
data-title |
设置默认的弹出框的标题。当title 属性不存在或属性值为空时,该属性才会发挥作用。 |
data-trigger |
设置触发弹出框的方法,可选值为click 、hover 、focus 、manual ,该属性的默认值是click —这意味着需要通过鼠标单击来触发弹出框。该属性还支持多个属性值的组合。比如`click |
popover方法参数
使用JS激活弹出框时要调用弹出框的popover()
方法,调用该方法时可传入如下参数。
- 字符串参数:该字符串参数支持
'show'
、'hide'
、'toggle'
和'destroy'
等字符串,分别表示显示弹出框、隐藏弹出框、切换弹出框的显示/隐藏、销毁弹出框。如果调用popover()
方法时传入了'destroy'
字符串,那就意味着要销毁该弹出框,因此页面以后再也不会显示该弹出框。 - JS对象参数:该JS对象支持上面介绍的以
data-
开头的各种选择,只是无须使用data-
前缀。在前面示例中激活弹出框时就传入了{html:true}
对象作为参数
原文链接: 8.7.3 弹出框支持的属性