javascript - Bootstrap : popover button click

Question

我已经使用了 bootstrap popover 功能，它现在可以工作了..但是如果我在页面中的任何地方单击，我需要“关闭”popover 框。请检查我使用的代码。

首先点击按钮，然后我需要在点击黑色区域时“关闭”弹出框(现在只有当我们点击同一个按钮时才会关闭)。

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
  <a href="#" title="Header" data-toggle="popover" data-content="Some content" class="btn btn-danger">Click here</a>
  <br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

只需在 a 标签中使用 data-trigger="focus"

更多信息请查看Dismissible popover

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
  <a href="#" title="Header" data-toggle="popover" data-content="Some content" class="btn btn-danger" data-trigger="focus">Click here</a>
  <br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>