您的位置：首页 > Web前端 > BootStrap

Bootstrap 弹出框

2016-03-17 21:34 886 查看
弹出框是一种特殊的提示框，只是多了一个title标题而已。另外，提示框的默认触发事件是hover和focus，而弹出框的默认触发事件是click，和提示框一样，需要手工JS代码来初始化：$(‘[data-toggle=popover]’).popover();

示例代码：

<script>
$(function () {
$('[data-toggle=popover]').popover();
})
</script>
</head>
<body>
<a data-toggle="popover" data-title="A title" data-content="And here is some amazing content.It is very engaging."
class="btn btn-default" href="#">click me</a>
</body>


弹出框组件的声明选项：





注意：

1、在.btn-group 或 .input-group内的元素上使用popover时，需要指定container: ‘body’选项以避免不必要的副作用（例如，当popover显示之后，与其相关的页面元素可能变得更宽或去圆角）。

2、为了给disabled 或.disabled元素添加popover，将需要增加popover的页面元素包裹在一个<div>中，然后对这个<div>元素应用popover。

二、JS用法

// 通用方式，options可以定义其他属性
$(‘#element’).popover(options);
// 例子：指定提示语的标题、内容以及显示位置
$(‘#element’). popover ({
title: ”提示语的标题”,
content：”提示语的内容”,
placement: ‘top’
});
$(‘#element’).popover(‘show’); // 显示提示语
$(‘#element’).popover(‘hide’); // 关闭提示语
$(‘#element’).popover(‘toggle’); // 反转提示语
$(‘#element’).popover (‘destroy’); // 隐藏并销毁提示语


事件：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航