blocks|key|3126268|text|假设在任何时候只有一个弹出框可见，您可以使用一组标志来标记何时有弹出框可见，然后才会隐藏它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3126269|如果您在单据正文上设置了事件监听器，那么当您点击带有'popup-marker‘的元素时，事件监听器就会触发。因此，您必须在事件对象上调用stopPropagation()。并在单击弹出窗口本身时应用相同的技巧。|offset|length|style|CODE|3126270|下面是一个可以执行此操作的JavaScript代码。它使用jQuery+>=+1.7|3126271|jQuery(function()+{
++++var+isVisible+=+false;

++++var+hideAllPopovers+=+function()+{
+++++++$('.popup-marker').each(function()+{
++++++++++++$(this).popover('hide');
++++++++});++
++++};

++++$('.popup-marker').popover({
++++++++html:+true,
++++++++trigger:+'manual'
++++}).on('click',+function(e)+{
++++++++//+if+any+other+popovers+are+visible,+hide+them
++++++++if(isVisible)+{
++++++++++++hideAllPopovers();
++++++++}

++++++++$(this).popover('show');

++++++++//+handle+clicking+on+the+popover+itself
++++++++$('.popover').off('click').on('click',+function(e)+{
++++++++++++e.stopPropagation();+//+prevent+event+for+bubbling+up+=>+will+not+get+caught+with+document.onclick
++++++++});

++++++++isVisible+=+true;
++++++++e.stopPropagation();
++++});


++++$(document).on('click',+function(e)+{
++++++++hideAllPopovers();
++++++++isVisible+=+false;
++++});
});|code-block|syntax|javascript|3126272|http://jsfiddle.net/AFffL/539/|3126273|唯一的警告是你不能同时打开2个弹出窗口。但我认为这会让用户感到困惑:-)|3126274|entityMap|0|LINK|mutability|MUTABLE|url^0|0|1X|H|0|0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|P]]]]

Presuming that only one popover can be visible at any time, you can use a set of flags to mark when there's a popover visible, and only then hide them.

If you set the event listener on the document body, it will trigger when you click the element marked with 'popup-marker'. So you'll have to call <code>stopPropagation()</code> on the event object. And apply the same trick when clicking on the popover itself.

Below is a working JavaScript code that does this. It uses jQuery >= 1.7

<pre><code>jQuery(function() {
 var isVisible = false;

 var hideAllPopovers = function() {
 $('.popup-marker').each(function() {
 $(this).popover('hide');
 }); 
 };

 $('.popup-marker').popover({
 html: true,
 trigger: 'manual'
 }).on('click', function(e) {
 // if any other popovers are visible, hide them
 if(isVisible) {
 hideAllPopovers();
 }

 $(this).popover('show');

 // handle clicking on the popover itself
 $('.popover').off('click').on('click', function(e) {
 e.stopPropagation(); // prevent event for bubbling up =&gt; will not get caught with document.onclick
 });

 isVisible = true;
 e.stopPropagation();
 });


 $(document).on('click', function(e) {
 hideAllPopovers();
 isVisible = false;
 });
});
</code></pre>

<a href="http://jsfiddle.net/AFffL/539/" rel="noreferrer">http://jsfiddle.net/AFffL/539/</a>

The only caveat is that you won't be able to open 2 popovers at the same time. But I think that would be confusing for the user, anyway :-)

blocks|key|244092|text|jQuery(':not(.popup-marker)').once().click(function(){
+++jQuery('.popup-marker').hide();+
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|244093|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>jQuery(':not(.popup-marker)').once().click(function(){
 jQuery('.popup-marker').hide(); 
});
</code></pre>

blocks|key|239186|text|我也有类似的需求，于是找到了这个great+little+extension+of+the+Twitter+Bootstrap+Popover+by+Lee+Carmichael,+called+BootstrapX+-+clickover。他也有一些here的用法示例。基本上，它会将弹出窗口更改为一个交互式组件，当您在页面上的其他地方单击或在弹出窗口内的关闭按钮上单击时，该组件将关闭。这也将允许一次打开多个弹出窗口和一堆其他不错的功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|239187|Plugin+can+be+found+here。|239188|使用示例|239189|<button+rel="clickover"+data-content="Show+something+here.+
++++<button+data-dismiss='clickover'
++++>Close+Clickover</button>"
>Show+clickover</button>|code-block|syntax|javascript|239190|javascript：|239191|//+load+click+overs+using+'rel'+attribute
$('[rel="clickover"]').clickover();|239192|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.leecarmichael.com/2012/04/bootstrapx-clickover.html|1|http://www.leecarmichael.com/bootstrapx-clickover/examples.html|2|https://github.com/lecar-red/bootstrapx-clickover^0|G|2W|0|3I|4|1|0|0|O|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]]|C|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1G|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

I had a similar need, and found this <a href="http://blog.leecarmichael.com/2012/04/bootstrapx-clickover.html" rel="nofollow noreferrer">great little extension of the Twitter Bootstrap Popover by Lee Carmichael, called BootstrapX - clickover</a>. He also has some usage examples <a href="http://www.leecarmichael.com/bootstrapx-clickover/examples.html" rel="nofollow noreferrer">here</a>. Basically it will change the popover into an interactive component which will close when you click elsewhere on the page, or on a close button within the popover. This will also allow multiple popovers open at once and a bunch of other nice features.

<a href="https://github.com/lecar-red/bootstrapx-clickover" rel="nofollow noreferrer">Plugin can be found here</a>.

Usage example

<pre><code>&lt;button rel="clickover" data-content="Show something here. 
 &lt;button data-dismiss='clickover'
 &gt;Close Clickover&lt;/button&gt;"
&gt;Show clickover&lt;/button&gt;
</code></pre>

javascript: 

<pre><code>// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();
</code></pre>

blocks|key|244095|text|这甚至更简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|244096|$('html').click(function(e)+{
++++$('.popup-marker').popover('hide');
});

$('.popup-marker').popover({
++++html:+true,
++++trigger:+'manual'
}).click(function(e)+{
++++$(this).popover('toggle');
++++e.stopPropagation();
});|code-block|syntax|javascript|244097|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is even easier : 

<pre><code>$('html').click(function(e) {
 $('.popup-marker').popover('hide');
});

$('.popup-marker').popover({
 html: true,
 trigger: 'manual'
}).click(function(e) {
 $(this).popover('toggle');
 e.stopPropagation();
});
</code></pre>

blocks|key|2911993|text|我这样做如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2911994|$("a[rel=popover]").click(function(event){
++++if(event.which+==+1)
++++{+++
++++++++$thisPopOver+=+$(this);
++++++++$thisPopOver.popover('toggle');
++++++++$thisPopOver.parent("li").click(function(event){
++++++++++++event.stopPropagation();
++++++++++++$("html").click(function(){
++++++++++++++++$thisPopOver.popover('hide');
++++++++++++});
++++++++});
++++}
});|code-block|syntax|javascript|2911995|希望这能有所帮助！|2911996|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I do it as below

<pre><code>$("a[rel=popover]").click(function(event){
 if(event.which == 1)
 { 
 $thisPopOver = $(this);
 $thisPopOver.popover('toggle');
 $thisPopOver.parent("li").click(function(event){
 event.stopPropagation();
 $("html").click(function(){
 $thisPopOver.popover('hide');
 });
 });
 }
});
</code></pre>

Hope this helps!

blocks|key|241444|text|https://github.com/lecar-red/bootstrapx-clickover|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|241445|它是twitter+bootstrap+popover的一个扩展，可以非常简单地解决这个问题。|241446|entityMap|0|LINK|mutability|MUTABLE|url^0|0|1D|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@$A|N|B|O|1|P]]|C|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|4]]]]

<a href="https://github.com/lecar-red/bootstrapx-clickover" rel="nofollow">https://github.com/lecar-red/bootstrapx-clickover</a>

It's an extension of twitter bootstrap popover and will solve the problem very simply.

blocks|key|2912020|text|以下是对我非常有效的解决方案，如果它能有所帮助的话：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912021|/**
*+Add+the+equals+method+to+the+jquery+objects
*/
$.fn.equals+=+function(compareTo)+{
++if+(!compareTo+%7C%7C+this.length+!==+compareTo.length)+{
++++return+false;
++}
++for+(var+i+=+0;+i+<+this.length;+%2B%2Bi)+{
++++if+(this[i]+!==+compareTo[i])+{
++++++return+false;
++++}
++}
++return+true;
};

/**
+*+Activate+popover+message+for+all+concerned+fields
+*/
var+popoverOpened+=+null;
$(function()+{+
++++$('span.btn').popover();
++++$('span.btn').unbind("click");
++++$('span.btn').bind("click",+function(e)+{
++++++++e.stopPropagation();
++++++++if($(this).equals(popoverOpened))+return;
++++++++if(popoverOpened+!==+null)+{
++++++++++++popoverOpened.popover("hide");++++++++++++
++++++++}
++++++++$(this).popover('show');
++++++++popoverOpened+=+$(this);
++++++++e.preventDefault();
++++});

++++$(document).click(function(e)+{
++++++++if(popoverOpened+!==+null)+{
++++++++++++popoverOpened.popover("hide");+++
++++++++++++popoverOpened+=+null;
++++++++}++++++++
++++});
});|code-block|syntax|javascript|2912022|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is the solution which worked very fine for me, if it can help :

<pre><code>/**
* Add the equals method to the jquery objects
*/
$.fn.equals = function(compareTo) {
 if (!compareTo || this.length !== compareTo.length) {
 return false;
 }
 for (var i = 0; i &lt; this.length; ++i) {
 if (this[i] !== compareTo[i]) {
 return false;
 }
 }
 return true;
};

/**
 * Activate popover message for all concerned fields
 */
var popoverOpened = null;
$(function() { 
 $('span.btn').popover();
 $('span.btn').unbind("click");
 $('span.btn').bind("click", function(e) {
 e.stopPropagation();
 if($(this).equals(popoverOpened)) return;
 if(popoverOpened !== null) {
 popoverOpened.popover("hide"); 
 }
 $(this).popover('show');
 popoverOpened = $(this);
 e.preventDefault();
 });

 $(document).click(function(e) {
 if(popoverOpened !== null) {
 popoverOpened.popover("hide"); 
 popoverOpened = null;
 } 
 });
});
</code></pre>

blocks|key|239202|text|出于某种原因，这里的其他解决方案对我都不起作用。然而，经过大量的故障排除，我终于找到了这个完美的方法(至少对我来说是这样)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239203|$('html').click(function(e)+{
++if(+!$(e.target).parents().hasClass('popover')+)+{
++++$('#popover_parent').popover('destroy');
++}
});|code-block|syntax|javascript|239204|在我的例子中，我将一个弹出式窗口添加到一个表格中，并将其绝对定位在被点击的td的上方/下方。表的选择是由jQuery-UI+Selectable处理的，所以我不确定这是不是干扰。但是，每当我在popover内单击时，我的针对$('.popover')的单击处理程序都无法工作，事件处理总是委托给$(html)单击处理程序。我是JS的新手，所以也许我只是错过了一些东西？|offset|length|style|CODE|239205|无论如何，我希望这对某些人有帮助！|239206|entityMap^0|0|0|11|2|34|D|43|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

For some reason none of the other solutions here worked for me. However, after a lot of troubleshooting, I finally arrived at this method which works perfectly (for me at least).

<pre><code>$('html').click(function(e) {
 if( !$(e.target).parents().hasClass('popover') ) {
 $('#popover_parent').popover('destroy');
 }
});
</code></pre>

In my case I was adding a popover to a table and absolutely positioning it above/below the <code>td</code> that was clicked. The table selection was handled by jQuery-UI Selectable so I'm not sure if that was interfering. However whenever I clicked inside the popover my click handler which targeted <code>$('.popover')</code> never worked and the event handling was always delegated to the <code>$(html)</code> click handler. I'm fairly new to JS so perhaps I'm just missing something?

Anyways I hope this helps someone!

blocks|key|3126310|text|尝试使用data-trigger="focus"而不是"click"。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3126311|这为我解决了这个问题。|3126312|entityMap^0|4|K|R|7|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

Try <code>data-trigger="focus"</code> instead of <code>"click"</code>. 

This solved the problem for me.

blocks|key|3126317|text|如果你想在pjax中使用twitter+bootstrap+popover，这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3126318|App.Utils.Popover+=+{

++enableAll:+function()+{
++++$('.pk-popover').popover(
++++++{
++++++++trigger:+'click',
++++++++html+:+true,
++++++++container:+'body',
++++++++placement:+'right',
++++++}
++++);
++},

++bindDocumentClickEvent:+function(documentObj)+{
++++$(documentObj).click(function(event)+{
++++++if(+!$(event.target).hasClass('pk-popover')+)+{
++++++++$('.pk-popover').popover('hide');
++++++}
++++});
++}

};

$(document).on('ready+pjax:end',+function()+{
++App.Utils.Popover.enableAll();
++App.Utils.Popover.bindDocumentClickEvent(this);
});|code-block|syntax|javascript|3126319|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you're trying to use twitter bootstrap popover with pjax, this worked for me:

<pre><code>App.Utils.Popover = {

 enableAll: function() {
 $('.pk-popover').popover(
 {
 trigger: 'click',
 html : true,
 container: 'body',
 placement: 'right',
 }
 );
 },

 bindDocumentClickEvent: function(documentObj) {
 $(documentObj).click(function(event) {
 if( !$(event.target).hasClass('pk-popover') ) {
 $('.pk-popover').popover('hide');
 }
 });
 }

};

$(document).on('ready pjax:end', function() {
 App.Utils.Popover.enableAll();
 App.Utils.Popover.bindDocumentClickEvent(this);
});
</code></pre>

blocks|key|244111|text|我给我所有的popovers锚点类activate_popover。我一次把它们全部激活|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|244112|$('body').popover({selector:+'.activate-popover',+html+:+true,+container:+'body'})|244113|要让我使用的click+away功能正常工作(在咖啡脚本中)：|244114|$(document).on('click',+(e)+->
++clickedOnActivate+=+($(e.target).parents().hasClass("activate-popover")+%7C%7C+$(e.target).hasClass("activate-popover"))
++clickedAway+=+!($(e.target).parents().hasClass("popover")+%7C%7C+$(e.target).hasClass("popover"))
if+clickedAway+&&+!clickedOnActivate
++$(".popover.in").prev().popover('hide')
if+clickedOnActivate+
++$(".popover.in").prev().each+()+->
++++if+!$(this).is($(e.target).closest('.activate-popover'))
++++++$(this).popover('hide')
)|code-block|syntax|javascript|244115|它在bootstrap+2.3.1上运行得非常好|244116|entityMap^0|H|G|0|0|2A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

I give all my popovers anchors the class <code>activate_popover</code>. I activate them all at once onload

<code>$('body').popover({selector: '.activate-popover', html : true, container: 'body'})</code>

to get the click away functionality working I use (in coffee script):

<pre><code>$(document).on('click', (e) -&gt;
 clickedOnActivate = ($(e.target).parents().hasClass("activate-popover") || $(e.target).hasClass("activate-popover"))
 clickedAway = !($(e.target).parents().hasClass("popover") || $(e.target).hasClass("popover"))
if clickedAway &amp;&amp; !clickedOnActivate
 $(".popover.in").prev().popover('hide')
if clickedOnActivate 
 $(".popover.in").prev().each () -&gt;
 if !$(this).is($(e.target).closest('.activate-popover'))
 $(this).popover('hide')
)
</code></pre>

Which works perfectly fine with bootstrap 2.3.1

blocks|key|2912037|text|被接受的解决方案给了我一些问题(点击打开的弹出窗口的‘.popup-+made’元素后，弹出窗口就不能工作了)。我想出了另一个非常适合我的解决方案，而且非常简单(我使用的是Bootstrap+2.3.1)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912038|$('.popup-marker').popover({
++++html:+true,
++++trigger:+'manual'
}).click(function(e)+{
++++$('.popup-marker').not(this).popover('hide');
++++$(this).popover('toggle');
});
$(document).click(function(e)+{
++++if+(!$(e.target).is('.popup-marker,+.popover-title,+.popover-content'))+{
++++++++$('.popup-marker').popover('hide');
++++}
});|code-block|syntax|javascript|2912039|更新:此代码也适用于Bootstrap+3！|2912040|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The accepted solution gave me some issues (clicking on the '.popup-marker' element of the opened popover made the popovers not work afterwards). I came up with this other solution that works perfectly for me and it's quite simple (I'm using Bootstrap 2.3.1):

<pre><code>$('.popup-marker').popover({
 html: true,
 trigger: 'manual'
}).click(function(e) {
 $('.popup-marker').not(this).popover('hide');
 $(this).popover('toggle');
});
$(document).click(function(e) {
 if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
 $('.popup-marker').popover('hide');
 }
});
</code></pre>

UPDATE: This code works with Bootstrap 3 as well!

blocks|key|241470|text|@RayOnAir，我之前的解决方案也有同样的问题。我也很接近@RayOnAir的解决方案。改进的一件事是当点击其他弹出标记时，关闭已经打开的弹出标记。所以我的代码是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|241471|var+clicked_popover_marker+=+null;
var+popover_marker+=+'#pricing+i';

$(popover_marker).popover({
++html:+true,
++trigger:+'manual'
}).click(function+(e)+{
++clicked_popover_marker+=+this;

++$(popover_marker).not(clicked_popover_marker).popover('hide');
++$(clicked_popover_marker).popover('toggle');
});

$(document).click(function+(e)+{
++if+(e.target+!=+clicked_popover_marker)+{
++++$(popover_marker).popover('hide');
++++clicked_popover_marker+=+null;
++}
});|code-block|syntax|javascript|241472|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

@RayOnAir, I have same issue with previous solutions. I come close to @RayOnAir solution too. One thing that improved is close already opened popover when click on other popover marker. So my code is:

<pre><code>var clicked_popover_marker = null;
var popover_marker = '#pricing i';

$(popover_marker).popover({
 html: true,
 trigger: 'manual'
}).click(function (e) {
 clicked_popover_marker = this;

 $(popover_marker).not(clicked_popover_marker).popover('hide');
 $(clicked_popover_marker).popover('toggle');
});

$(document).click(function (e) {
 if (e.target != clicked_popover_marker) {
 $(popover_marker).popover('hide');
 clicked_popover_marker = null;
 }
});
</code></pre>

blocks|key|242726|text|这是我的解决方案，值得一提：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|242727|//+Listen+for+clicks+or+touches+on+the+page
$("html").on("click.popover.data-api+touchend.popover.data-api",+function(e)+{

++//+Loop+through+each+popover+on+the+page
++$("[data-toggle=popover]").each(function()+{

++++//+Hide+this+popover+if+it's+visible+and+if+the+user+clicked+outside+of+it
++++if+($(this).next('div.popover:visible').length+&&+$(".popover").has(e.target).length+===+0)+{
++++++$(this).popover("hide");
++++}

++});
});|code-block|syntax|javascript|242728|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's my solution, for what it's worth:

<pre><code>// Listen for clicks or touches on the page
$("html").on("click.popover.data-api touchend.popover.data-api", function(e) {

 // Loop through each popover on the page
 $("[data-toggle=popover]").each(function() {

 // Hide this popover if it's visible and if the user clicked outside of it
 if ($(this).next('div.popover:visible').length &amp;&amp; $(".popover").has(e.target).length === 0) {
 $(this).popover("hide");
 }

 });
});
</code></pre>

blocks|key|239228|text|我发现这是pbaron上面建议的一个修改过的解决方案，因为他的解决方案激活了所有类为'popup-marker‘的元素上的popover('hide')。然而，当你对html内容使用popover()而不是data-content时，就像我在下面做的那样，在html弹出窗口中的任何点击实际上都会激活popover('hide')，它会立即关闭窗口。下面的方法遍历每个.popup-marker元素，并首先发现父元素是否与所单击的.popup-marker的id相关，如果是，则不隐藏它。所有其他的div都隐藏了..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239229|++++++++$(function(){
++++++++++++$('html').click(function(e)+{
++++++++++++++++//+this+is+my+departure+from+pbaron's+code+above
++++++++++++++++//+$('.popup-marker').popover('hide');
++++++++++++++++$('.popup-marker').each(function()+{
++++++++++++++++++++if+($(e.target).parents().children('.popup-marker').attr('id')!=($(this).attr('id')))+{
++++++++++++++++++++++++$(this).popover('hide');
++++++++++++++++++++}
++++++++++++++++});
++++++++++++});

++++++++++++$('.popup-marker').popover({
++++++++++++++++html:+true,
++++++++++++++++//+this+is+where+I'm+setting+the+html+for+content+from+a+nearby+hidden+div+with+id="html-"%2Bclicked_div_id
++++++++++++++++content:+function()+{+return+$('#html-'%2B$(this).attr('id')).html();+},
++++++++++++++++trigger:+'manual'
++++++++++++}).click(function(e)+{
++++++++++++++++$(this).popover('toggle');
++++++++++++++++e.stopPropagation();
++++++++++++});
++++++++});|code-block|syntax|javascript|239230|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I found this to be a modified solution of pbaron's suggestion above, because his solution activated the popover('hide') on all elements with class 'popup-marker'. However, when you're using popover() for html content instead of the data-content, as I'm doing below, any clicks inside that html popup actually activate the popover('hide'), which promptly closes the window. This method below iterates through each .popup-marker element and discovers first if the parent is related to the .popup-marker's id that was clicked, and if so then does not hide it. All other divs are hidden...

<pre><code> $(function(){
 $('html').click(function(e) {
 // this is my departure from pbaron's code above
 // $('.popup-marker').popover('hide');
 $('.popup-marker').each(function() {
 if ($(e.target).parents().children('.popup-marker').attr('id')!=($(this).attr('id'))) {
 $(this).popover('hide');
 }
 });
 });

 $('.popup-marker').popover({
 html: true,
 // this is where I'm setting the html for content from a nearby hidden div with id="html-"+clicked_div_id
 content: function() { return $('#html-'+$(this).attr('id')).html(); },
 trigger: 'manual'
 }).click(function(e) {
 $(this).popover('toggle');
 e.stopPropagation();
 });
 });
</code></pre>

blocks|key|239232|text|我想出了这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239233|我的方案包括在同一页面上有更多的弹出窗口，隐藏它们只会使它们看不见，因此，在弹出窗口后面的项目上单击是不可能的。这个想法是将特定的弹出链接标记为“活动的”，然后您可以简单地“切换”活动的弹出链接。这样做将完全关闭弹出窗口。|239234|$('.popover-link').popover({+html+:+true,+container:+'body'+})

$('.popover-link').popover().on+'shown.bs.popover',+->
++$(this).addClass('toggled')

$('.popover-link').popover().on+'hidden.bs.popover',+->
++$(this).removeClass('toggled')

$("body").on+"click",+(e)+->
++$openedPopoverLink+=+$(".popover-link.toggled")
++if+$openedPopoverLink.has(e.target).length+==+0
++++$openedPopoverLink.popover+"toggle"
++++$openedPopoverLink.removeClass+"toggled"|code-block|syntax|javascript|239235|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I came up with this:

My scenario included more popovers on the same page, and hiding them just made them invisible and because of that, clicking on items behind the popover was not possible.
The idea is to mark the specific popover-link as 'active' and then you can simply 'toggle' the active popover. Doing so will close the popover completely.

<pre><code>$('.popover-link').popover({ html : true, container: 'body' })

$('.popover-link').popover().on 'shown.bs.popover', -&gt;
 $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', -&gt;
 $(this).removeClass('toggled')

$("body").on "click", (e) -&gt;
 $openedPopoverLink = $(".popover-link.toggled")
 if $openedPopoverLink.has(e.target).length == 0
 $openedPopoverLink.popover "toggle"
 $openedPopoverLink.removeClass "toggled"
</code></pre>

blocks|key|239273|text|尽管这里有很多解决方案，我也想提出我的解决方案，我不知道是否有一些解决方案可以解决所有问题，但我尝试了其中的3个解决方案，但它们都有问题，比如单击弹出按钮使其隐藏，其他的问题是如果我有另一个弹出按钮同时单击/多个弹出按钮仍然会出现(就像在选定的解决方案中一样)，怎么可能，This+one解决了所有问题|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|239274|var+curr_popover_btn+=+null;
//+Hide+popovers+function
function+hide_popovers(e)
{
++++var+container+=+$(".popover.in");
++++if+(!container.is(e.target)+//+if+the+target+of+the+click+isn't+the+container...
++++++++&&+container.has(e.target).length+===+0)+//+...+nor+a+descendant+of+the+container
++++{
++++++++if(+curr_popover_btn+!=+null+)
++++++++{
++++++++++++$(curr_popover_btn).popover('hide');
++++++++++++curr_popover_btn+=+null;
++++++++}
++++++++container.hide();
++++}
}
//+Hide+popovers+when+out+of+focus
$('html').click(function(e)+{
++++hide_popovers(e);
});
$('.popover-marker').popover({
++++trigger:+'manual'
}).click(function(e)+{
++++hide_popovers(e);
++++var+$popover_btns+=+$('.popover-marker');
++++curr_popover_btn+=+this;
++++var+$other_popover_btns+=+jQuery.grep($($popover_btns),+function(popover_btn){
++++++++++++++++return+(+popover_btn+!==+curr_popover_btn+);
++++++++++++});
++++$($other_popover_btns).popover('hide');
++++$(this).popover('toggle');
++++e.stopPropagation();
});|code-block|syntax|javascript|239275|entityMap^0|3S|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Even though there are a lot of solutions here, i'd like to propose mine as well, i don't know if there is some solution up there that solves it all, but i tried 3 of them and they had issues, like clicking on the popover it self makes it hide, others that if i had another popover buttons clicked both/multiple popovers would still appear (like in the selected solution), How ever, This one fixed it all

<pre><code>var curr_popover_btn = null;
// Hide popovers function
function hide_popovers(e)
{
 var container = $(".popover.in");
 if (!container.is(e.target) // if the target of the click isn't the container...
 &amp;&amp; container.has(e.target).length === 0) // ... nor a descendant of the container
 {
 if( curr_popover_btn != null )
 {
 $(curr_popover_btn).popover('hide');
 curr_popover_btn = null;
 }
 container.hide();
 }
}
// Hide popovers when out of focus
$('html').click(function(e) {
 hide_popovers(e);
});
$('.popover-marker').popover({
 trigger: 'manual'
}).click(function(e) {
 hide_popovers(e);
 var $popover_btns = $('.popover-marker');
 curr_popover_btn = this;
 var $other_popover_btns = jQuery.grep($($popover_btns), function(popover_btn){
 return ( popover_btn !== curr_popover_btn );
 });
 $($other_popover_btns).popover('hide');
 $(this).popover('toggle');
 e.stopPropagation();
});
</code></pre>

blocks|key|242793|text|我在bootstrap+2.3.2上运行时遇到了一些问题。但我喜欢这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|242794|$(function+()+{
++$(document).mouseup(function+(e)+{
++++++++if(($('.popover').length+>+0)+&&+!$(e.target).hasClass('popInfo'))+{
++++++++++++$('.popover').each(function(){
++++++++++++++++$(this).prev('.popInfo').popover('hide');
++++++++++++});
++++++++}
++++});

++++$('.popInfo').popover({
++++++++trigger:+'click',
++++++++html:+true
++++});
});|code-block|syntax|javascript|242795|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had some problem to get it working on bootstrap 2.3.2.
But i sloved it this way:

<pre><code>$(function () {
 $(document).mouseup(function (e) {
 if(($('.popover').length &gt; 0) &amp;&amp; !$(e.target).hasClass('popInfo')) {
 $('.popover').each(function(){
 $(this).prev('.popInfo').popover('hide');
 });
 }
 });

 $('.popInfo').popover({
 trigger: 'click',
 html: true
 });
});
</code></pre>

blocks|key|3126501|text|略微调整了@David+Wolever解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3126502|function+closePopoversOnDocumentEvents()+{
++var+visiblePopovers+=+[];

++var+$body+=+$("body");

++function+hideVisiblePopovers()+{
++++/*+this+was+giving+problems+and+had+a+bit+of+overhead
++++++$.each(visiblePopovers,+function()+{
++++++++$(this).popover("hide");
++++++});
++++*/
++++while+(visiblePopovers.length+!==+0)+{
+++++++$(visiblePopovers.pop()).popover("hide");
++++}
++}

++function+onBodyClick(event)+{
++++if+(event.isDefaultPrevented())
++++++return;

++++var+$target+=+$(event.target);
++++if+($target.data("bs.popover"))
++++++return;

++++if+($target.parents(".popover").length)
++++++return;

++++hideVisiblePopovers();
++}

++function+onBodyKeyup(event)+{
++++if+(event.isDefaultPrevented())
++++++return;

++++if+(event.keyCode+!=+27)+//+esc
++++++return;

++++hideVisiblePopovers();
++++event.preventDefault();
++}

++function+onPopoverShow(event)+{
++++if+(!visiblePopovers.length)+{
++++++$body.on("click",+onBodyClick);
++++++$body.on("keyup",+onBodyKeyup);
++++}
++++visiblePopovers.push(event.target);
++}

++function+onPopoverHide(event)+{
++++var+target+=+event.target;
++++var+index+=+visiblePopovers.indexOf(target);
++++if+(index+>+-1)+{
++++++visiblePopovers.splice(index,+1);
++++}
++++if+(visiblePopovers.length+==+0)+{
++++++$body.off("click",+onBodyClick);
++++++$body.off("keyup",+onBodyKeyup);
++++}
++}

++$body.on("show.bs.popover",+onPopoverShow);
++$body.on("hide.bs.popover",+onPopoverHide);
}|code-block|syntax|javascript|3126503|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

tweaked @David Wolever solution slightly:

<pre><code>function closePopoversOnDocumentEvents() {
 var visiblePopovers = [];

 var $body = $("body");

 function hideVisiblePopovers() {
 /* this was giving problems and had a bit of overhead
 $.each(visiblePopovers, function() {
 $(this).popover("hide");
 });
 */
 while (visiblePopovers.length !== 0) {
 $(visiblePopovers.pop()).popover("hide");
 }
 }

 function onBodyClick(event) {
 if (event.isDefaultPrevented())
 return;

 var $target = $(event.target);
 if ($target.data("bs.popover"))
 return;

 if ($target.parents(".popover").length)
 return;

 hideVisiblePopovers();
 }

 function onBodyKeyup(event) {
 if (event.isDefaultPrevented())
 return;

 if (event.keyCode != 27) // esc
 return;

 hideVisiblePopovers();
 event.preventDefault();
 }

 function onPopoverShow(event) {
 if (!visiblePopovers.length) {
 $body.on("click", onBodyClick);
 $body.on("keyup", onBodyKeyup);
 }
 visiblePopovers.push(event.target);
 }

 function onPopoverHide(event) {
 var target = event.target;
 var index = visiblePopovers.indexOf(target);
 if (index &gt; -1) {
 visiblePopovers.splice(index, 1);
 }
 if (visiblePopovers.length == 0) {
 $body.off("click", onBodyClick);
 $body.off("keyup", onBodyKeyup);
 }
 }

 $body.on("show.bs.popover", onPopoverShow);
 $body.on("hide.bs.popover", onPopoverHide);
}
</code></pre>

blocks|key|239277|text|这里也提出了这个问题，我的回答不仅提供了一种理解jQuery+DOM遍历方法的方法，还提供了通过单击外部来处理关闭弹出窗口的两个选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239278|一次打开多个弹出窗口或一次打开一个弹出窗口。|239279|另外，这些小代码片段可以处理包含图标的按钮的关闭！|239280|https://stackoverflow.com/a/14857326/1060487|offset|length|239281|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@$H|U|I|V|1|W]]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|G]]]]

This question was also asked here and my answer provides not only a way to understand jQuery DOM traversal methods but 2 options for handling the closing of popovers by clicking outside.

Open multiple popovers at once or one popover at a time.

Plus these small code snippets can handle the closing of buttons containing icons!

<a href="https://stackoverflow.com/a/14857326/1060487">https://stackoverflow.com/a/14857326/1060487</a>

blocks|key|3126505|text|这个就像一个护身符，我用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3126506|它将在您单击时打开弹出窗口，如果您再次单击，它将关闭，如果您在弹出窗口之外单击，则弹出窗口将关闭。|3126507|这也适用于多个弹出窗口。|3126508|++++function+hideAllPopovers(){
++++$('[data-toggle="popover"]').each(function()+{
++++++++if+($(this).data("showing")+==+"true"){
++++++++++++$(this).data("showing",+"false");
++++++++++++$(this).popover('hide');++++++++++++++++
++++++++}
++++});
}
$('[data-toggle="popover"]').each(function()+{
++++++++$(this).popover({
++++++++++++html:+true,
++++++++++++trigger:+'manual'
++++++++}).click(function(e)+{
++++++++++++if+($(this).data("showing")+!=++"true"){
++++++++++++++++hideAllPopovers();
++++++++++++++++$(this).data("showing",+"true");
++++++++++++++++$(this).popover('show');
++++++++++++}else{
++++++++++++++++hideAllPopovers();
++++++++++++}
++++++++++++e.stopPropagation();
++++++++});
});

$(document).click(function(e)+{
++++hideAllPopovers();
});|code-block|syntax|javascript|3126509|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This one works like a charm and I use it.

It will open the popover when you click and if you click again it will close, also if you click outside of the popover the popover will be closed.

This also works with more than 1 popover.

<pre><code> function hideAllPopovers(){
 $('[data-toggle="popover"]').each(function() {
 if ($(this).data("showing") == "true"){
 $(this).data("showing", "false");
 $(this).popover('hide'); 
 }
 });
}
$('[data-toggle="popover"]').each(function() {
 $(this).popover({
 html: true,
 trigger: 'manual'
 }).click(function(e) {
 if ($(this).data("showing") != "true"){
 hideAllPopovers();
 $(this).data("showing", "true");
 $(this).popover('show');
 }else{
 hideAllPopovers();
 }
 e.stopPropagation();
 });
});

$(document).click(function(e) {
 hideAllPopovers();
});
</code></pre>

blocks|key|241530|text|阅读“下一次单击时取消”此处http://getbootstrap.com/javascript/#popovers|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|241531|您可以使用焦点触发器在下一次单击时消除弹出窗口，但您必须使用<a>标记，而不是<button>标记，并且还必须包括tabindex属性...|style|CODE|241532|示例：|241533|<a+href="#"+tabindex="0"+class="btn+btn-lg+btn-danger"
++data-toggle="popover"+data-trigger="focus"+title="Dismissible+popover"
++data-content="And+here's+some+amazing+content.+It's+very+engaging.+Right?">
++Dismissible+popover
</a>|code-block|syntax|javascript|241534|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/javascript/#popovers^0|E|18|0|0|U|3|13|8|1L|8|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@$A|11|B|12|F|G]|$A|13|B|14|F|G]|$A|15|B|16|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

read "Dismiss on next click"
here <a href="http://getbootstrap.com/javascript/#popovers">http://getbootstrap.com/javascript/#popovers</a>

You can use the focus trigger to dismiss popovers on the next click, but you have to use use the <code>&lt;a&gt;</code> tag, not the <code>&lt;button&gt;</code> tag, and you also must include a <code>tabindex</code> attribute...

Example:

<pre><code>&lt;a href="#" tabindex="0" class="btn btn-lg btn-danger"
 data-toggle="popover" data-trigger="focus" title="Dismissible popover"
 data-content="And here's some amazing content. It's very engaging. Right?"&gt;
 Dismissible popover
&lt;/a&gt;
</code></pre>

blocks|key|2912215|text|我在试着为一个简单的问题做一个简单的解决方案。上面的帖子很好，但对于一个简单的问题来说太复杂了。所以我做了一件简单的事情。刚添加了一个关闭按钮。这对我来说是完美的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912216|++++++++++++$(".popover-link").click(function(){
++++++++++++++++$(".mypopover").hide();
++++++++++++++++$(this).parent().find(".mypopover").show();
++++++++})
++++++++$('.close').click(function(){
++++$(this).parents('.mypopover').css('display','none');
});



++++++++++<div+class="popover-content">
++++++++<i+class="fa+fa-times+close">
++++<h3+class="popover-title">Title+here</h3>
your+other+content+here
++++++++</div>


+++.popover-content+{
++++position:relative;
++++}
++++.close+{
++++++++position:absolute;
++++++++color:#CCC;
++++++++right:5px;
++++++++top:5px;
++++++++cursor:pointer;
++++}|code-block|syntax|javascript|2912217|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I was trying to make a simple solution for a simple issue. Above posts are good but so complicated for a simple issue. So i made a simple thing. Just added a close button. Its perfect for me.

<pre><code> $(".popover-link").click(function(){
 $(".mypopover").hide();
 $(this).parent().find(".mypopover").show();
 })
 $('.close').click(function(){
 $(this).parents('.mypopover').css('display','none');
});



 &lt;div class="popover-content"&gt;
 &lt;i class="fa fa-times close"&gt;&lt;/i&gt;
 &lt;h3 class="popover-title"&gt;Title here&lt;/h3&gt;
your other content here
 &lt;/div&gt;


 .popover-content {
 position:relative;
 }
 .close {
 position:absolute;
 color:#CCC;
 right:5px;
 top:5px;
 cursor:pointer;
 }
</code></pre>

blocks|key|244236|text|我喜欢这个，简单而有效..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|244237|var+openPopup;

$('[data-toggle="popover"]').on('click',function(){
++++if(openPopup){
++++++++$(openPopup).popover('hide');

++++}
++++openPopup=this;
});|code-block|syntax|javascript|244238|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I like this, simple yet effective..

<pre><code>var openPopup;

$('[data-toggle="popover"]').on('click',function(){
 if(openPopup){
 $(openPopup).popover('hide');

 }
 openPopup=this;
});
</code></pre>

blocks|key|2912224|text|我会将焦点设置在新创建的弹出窗口上，并在模糊上将其删除。这样就不需要检查DOM的哪个元素被单击了，弹出窗口也可以被单击和选择:它不会失去焦点，也不会消失。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912225|代码：|2912226|++++$('.popup-marker').popover({
+++++++html:+true,
+++++++trigger:+'manual'
++++}).click(function(e)+{
+++++++$(this).popover('toggle');
+++++++//+set+the+focus+on+the+popover+itself+
+++++++jQuery(".popover").attr("tabindex",-1).focus();
+++++++e.preventDefault();
++++});

++++//+live+event,+will+delete+the+popover+by+clicking+any+part+of+the+page
++++$('body').on('blur','.popover',function(){
+++++++$('.popup-marker').popover('hide');
++++});|code-block|syntax|javascript|2912227|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I would set the focus to the newly created pop-over and remove it on blur. That way it's not needed to check which element of the DOM has been clicked and the pop-over can be clicked, and selected too: it will not lose its focus and will not disappear.

The code:

<pre><code> $('.popup-marker').popover({
 html: true,
 trigger: 'manual'
 }).click(function(e) {
 $(this).popover('toggle');
 // set the focus on the popover itself 
 jQuery(".popover").attr("tabindex",-1).focus();
 e.preventDefault();
 });

 // live event, will delete the popover by clicking any part of the page
 $('body').on('blur','.popover',function(){
 $('.popup-marker').popover('hide');
 });
</code></pre>

blocks|key|3126521|text|将btn-popover类添加到打开弹出按钮/链接的弹出按钮/链接中。当在弹出框外单击时，此代码将关闭弹出框。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3126522|$('body').on('click',+function(event)+{
++if+(!$(event.target).closest('.btn-popover,+.popover').length)+{
++++$('.popover').popover('hide');
++}
});|code-block|syntax|javascript|3126523|entityMap^0|1|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Add <code>btn-popover</code> class to your popover button/link that opens the popover. This code will close the popovers when clicking outside of it.

<pre><code>$('body').on('click', function(event) {
 if (!$(event.target).closest('.btn-popover, .popover').length) {
 $('.popover').popover('hide');
 }
});
</code></pre>

blocks|key|242810|text|一个更简单的解决方案，只需遍历所有弹出窗口，如果不是this，则隐藏。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|242811|$(document).on('click',+'.popup-marker',+function()+{
++++$(this).popover('toggle')
})

$(document).bind('click+touchstart',+function(e)+{
++++var+target+=+$(e.target)[0];
++++$('.popup-marker').each(function+()+{
++++++++//+hide+any+open+popovers+except+for+the+one+we've+clicked
++++++++if+(!$(this).is(target))+{
++++++++++++$(this).popover('hide');
++++++++}
++++});
});|code-block|syntax|javascript|242812|entityMap^0|Q|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

An even easier solution, just iterate through all popovers and hide if not <code>this</code>. 

<pre><code>$(document).on('click', '.popup-marker', function() {
 $(this).popover('toggle')
})

$(document).bind('click touchstart', function(e) {
 var target = $(e.target)[0];
 $('.popup-marker').each(function () {
 // hide any open popovers except for the one we've clicked
 if (!$(this).is(target)) {
 $(this).popover('hide');
 }
 });
});
</code></pre>

blocks|key|241544|text|$('.popForm').popover();

$('.conteneurPopForm').on("click",".fermePopover",function(){
++++$(".popForm").trigger("click");
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|241545|为了清楚起见，只需触发弹出|unstyled|241546|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$('.popForm').popover();

$('.conteneurPopForm').on("click",".fermePopover",function(){
 $(".popForm").trigger("click");
});
</code></pre>

To be clear, just trigger the popover

blocks|key|242814|text|另一个解决方案，它涵盖了我在单击弹出窗口的后代时遇到的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|242815|$(document).mouseup(function+(e)+{
++++//+The+target+is+not+popover+or+popover+descendants
++++if+(!$(".popover").is(e.target)+&&+0+===+$(".popover").has(e.target).length)+{
++++++++$("[data-toggle=popover]").popover('hide');
++++}
});|code-block|syntax|javascript|242816|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another solution, it covered the problem I had with clicking descendants of the popover:

<pre><code>$(document).mouseup(function (e) {
 // The target is not popover or popover descendants
 if (!$(".popover").is(e.target) &amp;&amp; 0 === $(".popover").has(e.target).length) {
 $("[data-toggle=popover]").popover('hide');
 }
});
</code></pre>

blocks|key|241548|text|这应该可以在Bootstrap+4中工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|241549|​|241550|$("#my-popover-trigger").popover({
++template:+'<div+class="popover+my-popover-content"+role="tooltip"><div+class="arrow"></div><div+class="popover-body"></div></div>',
++trigger:+"manual"
})

$(document).click(function(e)+{
++if+($(e.target).closest($("#my-popover-trigger")).length+>+0)+{
++++$("#my-popover-trigger").popover("toggle")
++}+else+if+(!$(e.target).closest($(".my-popover-content")).length+>+0)+{
++++$("#my-popover-trigger").popover("hide")
++}
})|code-block|syntax|javascript|241551|241552|解释：|241553|popover触发器第一部分按照文档初始化popover:第二部分中的https://getbootstrap.com/docs/4.0/components/popovers/|offset|length|241554|The+first+"if“检查被点击的元素是否是#my--|unordered-list-item|241555|的后代。如果为真，则切换popover+(它处理触发器上的单击)。|241556|第二部分中的第二个"+If“检查所单击的元素是否是在初始化模板中定义的popover内容类的后代。如果不是，这意味着单击不在弹出内容内，可以隐藏弹出内容。|241557|241558|241559|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/components/popovers/^0|0|0|0|0|0|Z|1I|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1B|8|@]|9|@$N|1C|O|1D|1|1E]]|A|$]]|$1|P|3|Q|5|R|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|R|7|1G|8|@]|9|@]|A|$]]|$1|U|3|V|5|R|7|1H|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

This should work in Bootstrap 4:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#my-popover-trigger").popover({
 template: '&lt;div class="popover my-popover-content" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="popover-body"&gt;&lt;/div&gt;&lt;/div&gt;',
 trigger: "manual"
})

$(document).click(function(e) {
 if ($(e.target).closest($("#my-popover-trigger")).length &gt; 0) {
 $("#my-popover-trigger").popover("toggle")
 } else if (!$(e.target).closest($(".my-popover-content")).length &gt; 0) {
 $("#my-popover-trigger").popover("hide")
 }
})</code></pre>
</div>
</div>


Explanation:

<ul>
<li>The first section inits the popover as per the docs: <a href="https://getbootstrap.com/docs/4.0/components/popovers/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/components/popovers/</a></li>
<li>The first "if" in the second section checks whether the clicked element is a descendant of #my-popover-trigger. If that is true, it toggles the popover (it handles the click on the trigger).</li>
<li>The second "if" in the second section checks whether the clicked element is a descendant of the popover content class which was defined in the init template. If it is not this means that the click was not inside the popover content, and the popover can be hidden.</li>
</ul>

I'm currently using popovers with Twitter Bootstrap, initiated like this:

<pre><code>$('.popup-marker').popover({
 html: true,
 trigger: 'manual'
 }).click(function(e) {
 $(this).popover('toggle');
 e.preventDefault();
 });
</code></pre>

As you can see, they're triggered manually, and clicking on .popup-marker (which is a div with a background image) toggles a popover. This works great, but I'd like to also be able to close the popover with a click anywhere else on the page (but not on the popover itself!).

I've tried a few different things, including the following, but with no results to show for it:

<pre><code>$('body').click(function(e) {
 $('.popup-marker').popover('hide');
});
</code></pre>

How can I close the popover with a click anywhere else on the page, but not with a click onthe popover itself?

How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?

我目前正在使用带有Twitter Bootstrap的popovers，启动方式如下：$('.popup-marker').popover({        html: true,        trigger: 'manual'    }).click(function(e) {        $(this).pop...

问如何从页面上的任何位置(否则)单击关闭Twitter Bootstrap弹出窗口？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从页面上的任何位置(否则)单击关闭Twitter Bootstrap弹出窗口？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从页面上的任何位置(否则)单击关闭Twitter Bootstrap弹出窗口？
EN