您需要处理popover 事件以控制它何时可见。
如果您不希望弹出窗口关闭,那真的很简单;只需在 hide 事件中返回 false ,如下所示:
$('#myPopover').on("hide.bs.popover", function() {
return false;
});
但是,您可能希望它最终关闭。因此,我建议在控件不再具有焦点时有条件地关闭它。当控件试图隐藏时,如果控件仍有焦点,则阻止它隐藏。
然后,由于您已经处理了 close 事件,因此您必须稍后在元素的 blur 事件期间重新触发 close 事件,如下所示:
$('#myPopover').on({
"hide.bs.popover": function() {
if ($(this).is(":focus")) return false;
},
"blur": function() {
$(this).popover('hide');
}
});
堆栈片段中的演示。
$('#myPopover').popover({
title: 'Custom Message',
content: 'Something to look at while selecting'
}).on({
"hide.bs.popover": function() {
if ($(this).is(":focus")) return false;
},
"blur": function() {
$(this).popover('hide');
}
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container">
<select id="myPopover">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>