单击弹出触发器元素时，如何关闭/关闭Bootstrap Popover？ [英] How can I close / dismiss Bootstrap Popover when clicking the popover trigger element?

问题描述

jsFiddle：

这是什么作品：

1. 点击按钮打开popover


2. 点击popover外面的pop关闭


3. 单击关闭弹出窗口.close 按钮

但是......再次单击原始按钮时，我无法关闭弹出窗口。相反，弹出窗口会再次闪烁。

自己复制这里。

我该如何做到这一点？

HTML：

 < button id =popoverIdclass =popoverThis btn btn-large btn-danger >点击以切换popover< / button> 
< div id =popoverContentclass =hide>此< em> rich< / em> <预> HTML< /预>内容进入popover< / div> 
  

JS：

  $（'＃popoverId'）。popover（{
 html：true，
 title：Popover Title，
 content：function（ ）{
返回$（'＃popoverContent'）。html（）; 
} 
}）; 
 
 
 var isVisible = false; 
 var clickedAway = false; 
 
 $（'。popoverThis'）。popover（{
 html：true，
 trigger：'manual'
}）。click（function（e）{ 
 $（this）.popover（'show'）; 
 $（'。popover-content'）。append（'< a class =closestyle =position：absolute; top： 0;右：6px;>& times;< / a>'）; 
 clickedAway = false 
 isVisible = true 
 e.preventDefault（）
}） ; 
 
 $（document）.click（function（e）{
 if（isVisible& clickedAway）{
 $（'。popoverThis'）。popover（'hide'） 
 isVisible = clickedAway = false 
} else {
 clickedAway = true 
} 
}）; 
  

解决方案

你想要这样的工作吗？

http://jsfiddle.net/kAYyR/3/

  $（'＃popoverId'）。popover（{
 html：true，
 title： 'Popover Title< a class =closehref =＃）;>& times;< / a>'，
 content：$（'＃popoverContent'）。html（），
}）; 
 
 $（'＃popoverId'）。click（function（e）{
 e.stopPropagation（）; 
}）; 
 
 $（document）.click（function（e）{
 if（（$（'。popover'）。has（e.target）.length == 0）|| $（e.target ）.is（'。close'））{
 $（'＃popoverId'）。popover（'hide'）; 
} 
}）; 
  

jsFiddle: http://jsfiddle.net/kAYyR/

Screenshot:

Here's what works:

1. Open popover on button click
2. Close popover on click outside popover
3. Close popover on click of .close button

BUT... I cannot get the popover to close when you click the original button again. Instead the popover flashes off and on again.

Duplicate it yourself here.

How can I accomplish this?

HTML:

<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button>
<div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div>

JS:

$('#popoverId').popover({
    html: true,
    title: "Popover Title",
    content: function () {
        return $('#popoverContent').html();
    }
});


var isVisible = false;
var clickedAway = false;

$('.popoverThis').popover({
    html: true,
    trigger: 'manual'
}).click(function (e) {
    $(this).popover('show');
    $('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">&times;</a>');
    clickedAway = false
    isVisible = true
    e.preventDefault()
});

$(document).click(function (e) {
    if (isVisible & clickedAway) {
        $('.popoverThis').popover('hide')
        isVisible = clickedAway = false
    } else {
        clickedAway = true
    }
});

解决方案

Do you want work like this ?

http://jsfiddle.net/kAYyR/3/

$('#popoverId').popover({
    html: true,
    title: 'Popover Title<a class="close" href="#");">&times;</a>',
    content: $('#popoverContent').html(),
});

$('#popoverId').click(function (e) {
    e.stopPropagation();
});

$(document).click(function (e) {
    if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
        $('#popoverId').popover('hide');
    }
});

这篇关于单击弹出触发器元素时，如何关闭/关闭Bootstrap Popover？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！