Popover提供一个样例
时间: 2023-05-25 08:02:23 浏览: 53
A:以下是一个基本的Popover样例,它包含一个popover按钮和popover内容:
HTML代码:
```
<button class="popover-btn" data-toggle="popover">点击打开Popover</button>
<div class="popover-content hide">这是一个Popover内容</div>
```
CSS代码:
```
.popover-content {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 15px rgba(0,0,0,.1);
padding: 10px;
position: absolute;
z-index: 1000;
max-width: 300px;
}
.popover-btn {
background-color: #337ab7;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
padding: 5px 10px;
}
.hidden {
display: none;
}
```
JavaScript代码:
```
$(function() {
$('[data-toggle="popover"]').popover({
content: function() {
return $(this).siblings('.popover-content').html();
},
placement: 'bottom',
trigger: 'click',
html: true
});
});
```
在这个样例中,Popover内容被包含在一个隐藏的div中,而Popover按钮则是一个具有data-toggle属性的按钮。当用户点击按钮时,Popover将会展示。Popover的行为是通过JavaScript代码来实现的,使用了Bootstrap框架提供的popover插件。在这里,jQuery被用来查找和处理节点。
需要注意的是,在这个示例中,我们使用了Bootstrap样式库和jQuery JavaScript库。这些库可以在它们的官方网站上免费下载和使用。