popover trigger : 'click' 点击弹出框外侧如何关闭弹出框
时间: 2023-12-24 15:02:17 浏览: 51
要在单击 Bootstrap popover 外部关闭弹出框,你可以使用一些 JavaScript 代码来实现。以下是一种方法:
首先,使用 JavaScript 选项来初始化 popover,并设置 `trigger` 属性为 `'click'`,以便通过单击目标元素来触发 popover 的显示。例如:
```html
<button type="button" class="btn btn-secondary" id="myButton" data-toggle="popover" data-content="Popover content" data-trigger="click">弹出框</button>
<script>
$(document).ready(function() {
$('#myButton').popover({
trigger: 'click',
content: 'Popover content'
});
});
</script>
```
接下来,我们需要添加一些 JavaScript 代码来处理单击页面其他区域时关闭 popover。这可以通过监听整个文档的点击事件,并检查点击事件发生的位置来实现。例如:
```html
<script>
$(document).ready(function() {
$('#myButton').popover({
trigger: 'click',
content: 'Popover content'
});
$(document).on('click', function(event) {
var $target = $(event.target);
if (!$target.closest('#myButton').length && $('.popover').is(':visible')) {
$('#myButton').popover('hide');
}
});
});
</script>
```
以上代码会在文档的点击事件中检查点击的目标元素是否是 `#myButton`,以及当前是否有 popover 正在显示。如果点击的是其他区域且 popover 正在显示,则通过调用 `popover('hide')` 方法来关闭 popover。
通过这种方式,你可以实现在单击 popover 外部区域时关闭弹出框。你可以根据需要进行修改和调整,以满足你的具体需求。