单击外部时关闭引导程序弹出窗口

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');
    }
 });

Answer 2

我再次进行了编辑： https : //jsfiddle.net/C5GBU/1775/

$(".popover_test").popover({
  html: true,
  content: function() {
    return $("#content").html();
  },
  title: function() {
    return $("#title").html();
  }
}).on('click', function(e) {
  $('.popover-content').click(function(e) {
    e.stopPropagation();
  })
});

$('body').on('click', function(e) {
  $('.popover_test').each(function() {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover_test').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});     

请让我知道这是否有效

Answer 3

可以在11703093上找到答案

$(document).on('click', function (e) {
$('[data-toggle="popover"],[data-original-title]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) 
    {                
        (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
    }

});

});