Bootstrap popover，隐藏在外面点击？

使用bootstrap popover，现在我试图让这个代码在popover外面点击以关闭popover：

$('body').on('click', function (e) { $('[data-toggle="popover"]').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'); } }); }); 

但是当我使用这个部分时，我可以关闭弹出窗口，但我不能点击其他按钮，任何人都知道我怎么能这样做？

所有按钮：

 This opens popover Other link <- Doesn't work Other link <- Doesn't work 

Answer 1

我发现了这个： http ： //bootply.com/99372

 $('body').on('click', function (e) { $('[data-toggle=popover]').each(function () { // hide any open popovers when the anywhere else in the body is clicked if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { $(this).popover('hide'); } }); }); 

它和你的代码几乎相同……

Answer 2

事实上，你甚至不需要JS，因为在Bootstrap中已经有了这个设置。

请参阅： http ： //getbootstrap.com/javascript/#dismiss-on-next-click

“解雇下一次点击所需的特定标记要获得正确的跨浏览器和跨平台行为，您必须使用标签，而不是标签，并且还必须包含role =”button“和tabindex属性。“

防爆。 ：

 Dismissible popover 

Answer 3

即使我有这个问题..我能够摆脱它..

只需在代码中添加此行..：

  $(this).css('display', 'none'); 

Answer 4

我只是编写了我自己的答案变体，因为我遇到了一个问题，如果我尝试在点击后重新打开一个弹出框，我需要单击按钮2次。

此代码的目标是模拟单击按钮以激活弹出窗口。

所以有代码：

 $('html').on('click', function(e) { $('[data-toggle="popover"]').each(function() { //Loop for everything containing a data-toggle="popover" if ($(this).attr('aria-describedby') != null ) { //Check if the popover is active / contain an aria-describedby with a value var id = $(this).attr('aria-describedby'); //Put the value in a variable if (!$(e.target).closest(".popover-content").length && $(e.target).attr("aria-describedby") != id && !$(e.target).closest('[aria-describedby="'+id+'"').length) { //Look if the click is a child of the popover box or if it's the button itself or a child of the button $('[aria-describedby="'+id+'"]').trigger( "click" ); //trigger a click as if you clicked the button } } }); }); 

Answer 5

试试这个。 单击弹出框的外部时，它将关闭弹出窗口。

 $('body').on('click', function (e) { //did not click a popover toggle, or icon in popover toggle, or popover if ($(e.target).data('toggle') !== 'popover' && $(e.target).parents('[data-toggle="popover"]').length === 0 && $(e.target).parents('.popover.in').length === 0) { (($('[data-toggle="popover"]').popover('hide').data('bs.popover') || {}).inState || {}).click = false; } }); 

另一种方案，

 Dismissible popover 

添加tabindex =“0”和data-trigger =“focus”

Answer 6

实际上我对这段代码很好，因为上面的解决方案都没有为我工作：

  $('body').on('mouseleave', '.popover', function () { $(this).hide(); }); 

Answer 7

只需添加此元素即可在下次单击时关闭弹出窗口。

 data-trigger="focus" 

从这里引用： Bootstrap Popover

Answer 8

只是隐藏popover将无法正常工作。 您需要单击两次以再次显示弹出窗口。 https://github.com/twbs/bootstrap/issues/16732

使其适用于Bootstrap 3.3.6。 试试这个：

 $('body').on('click', function (e) { $('[data-toggle=popover]').each(function () { 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; } }); }); 

Bootstrap 4使用_activeTrigger而不是inState ：

 $(e.target).data("bs.popover")._activeTrigger.click = false