web-dev-qa-db-ja.com

ポップオーバートリガー要素をクリックしたときにBootstrapポップオーバーを閉じる/閉じるにはどうすればよいですか？

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

スクリーンショット：

screenshot

機能するものは次のとおりです。

  1. ボタンをクリックしてポップオーバーを開く
  2. ポップオーバーの外側をクリックしてポップオーバーを閉じる
  3. .closeボタンをクリックしてポップオーバーを閉じる

しかし...元のボタンをもう一度クリックしても、ポップオーバーを閉じることができません。代わりに、ポップオーバーが点滅し、再び点滅します。

自分で複製 ここ 。

どうすればこれを達成できますか？

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
    }
});
javascriptjquerytwitter-bootstraponclickpopover
12
Ryan

このような仕事をしたいですか？

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');
    }
});
27
Steely Wing

私はこれを使います：

    $('[data-toggle="popover"]').popover({html: true, container: 'body'});

    $('[data-toggle="popover"]').click(function (e) {
        e.preventDefault();
        $('[data-toggle="popover"]').not(this).popover('hide');
        $(this).popover('toggle');
    });

    $(document).click(function (e) {
        if ($(e.target).parent().find('[data-toggle="popover"]').length > 0) {
            $('[data-toggle="popover"]').popover('hide');
        }
    });
8
Cam Tullos

この単純なコードは、ページ上のすべてのポップオーバーを非表示にします$（ '。popover'）。popover（ 'hide'）;

1
emrah kasal

このコードを使用するだけで簡単に実行できます

<div id='content'>something here</div>
 $('[data-toggle=popover]').popover({
        html: true,
        content: function () {
            return $('#content').html();
        }
    }).click(function (e) {
        $('[data-toggle=popover]').not(this).popover('hide');
    });
0
Hafsal Rh