javascript - 单击外部时关闭 Bootstrap 弹出窗口

Question

已经提出了类似的问题，但不适用于本示例。

这里我们有弹出窗口的代码:

HTML:

<a href="#" class="popover_test">Popover Example</a>
<!-- POPOVER -->
<div id="content" class="hidden">
  Contents
</div>
<div id="title" class="hidden">
  Title
</div>

Javascript:

$(".popover_test").popover({
    html : true, 
    content: function() {
      return $("#content").html();
    },
    title: function() {
      return $("#title").html();
    }
});

当我点击弹出窗口外部时使其消失的方法是什么？

这里有一个JSFIDDLE来在线测试它: https://jsfiddle.net/C5GBU/1772/

$(".popover_test").popover({
    html : true, 
    content: function() {
      return $("#content").html();
    },
    title: function() {
      return $("#title").html();
    }
});

.hidden {
  display: none;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#" class="popover_test">Popover Example</a>
<!-- POPOVER -->
<div id="content" class="hidden">
  Contents
</div>
<div id="title" class="hidden">
  Title
</div>

谢谢。

Answer 1

检查以下代码 -

$('[data-toggle="popover"]').popover();

$('body').on('click', function (e) {
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
 });