5

ポップオーバーを含む Web ページに動的に読み込まれるコンテンツがあります。このため、ロードして正しく表示されるように、それらをボディにバインドする必要があります。

ユーザーがポップオーバーの外側または別のポップオーバートリガーをクリックしたときに、ポップオーバーを非表示にする方法を見つけたいと思います。

ポップオーバーを「非表示」にすると、ポップオーバーは実際に非表示になりますが、要素は DOM に残ります。これは、ポップオーバー内のアクティブなリンクが引き続き「クリック可能」であることを意味します。

代わりにポップオーバーを破棄すると、非表示になりますが、クリックしても再度アクティブにすることはできません。ポップオーバーを非表示にする唯一の確実な方法は、「トグル」を使用することです。これにより、非表示にするポップオーバーを決定する複雑さが増します。

このすべてのコードを含むこの JSFiddleを参照してください。

HTML

<a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.yahoo.com'>http://www.yahoo.com</a>" class="some-popover-link">Yahoo</a>
<br><br> <br> <br> <br>  <a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.google.com'>http://www.google.com</a>" class="some-popover-link">Google</a>
<br><br> <br> <br> <br>  <a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.microsoft.com'>http://www.microsoft.com</a>" class="some-popover-link">Microsoft</a>

JavaScript

$('.some-popover-link').popover({
    container: 'body',
    html: true,
    placement: 'bottom'
});

$(document).click(function (e) {
    $('.some-popover-link').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide'); // this hides popover, but content remains
            return;
        }
    });
});
4

2 に答える 2

8

これは内部実装に依存しているため、注意が必要ですが、動作するはずです。JSFiddle リンク

if ($(this).data('bs.popover').tip().hasClass('in')) {
    $(this).popover('toggle');
}
于 2013-10-31T00:17:26.877 に答える
6

次のコードを使用します。

$(document).mouseup(function (e) {
    if ($('.popover').has(e.target).length === 0) {
        $('.popover').toggleClass('in').remove();
        return;
    }
});
于 2013-10-30T23:05:43.230 に答える