Question

类似的问题已经问过但不是这个例子。

这里我们有popover的代码：

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

当我点击popover外面时，为了消失它，approch是什么？

这是一个在线测试它的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
    }

});

});

在外部点击

3 个答案: