Nasıl sayfa üzerinde herhangi bir yerden bir tıklama () başka bir Twitter Bootstrap popover kapatabilir miyim?

SORU

20 Ocak 2012, Cuma

Nasıl sayfa üzerinde herhangi bir yerden bir tıklama () başka bir Twitter Bootstrap popover kapatabilir miyim?

Şu anda bu başlatılan Twitter Bootstrap ile çörek kullanıyorum:

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

Gördüğünüz gibi, manuel olarak tetiklenen, ve tıklayarak ediyorlar .pop-up-marker bir arka plan görüntüsü ile bir dıv) bir popover açar. Bu harika çalışıyor, ama aynı zamanda bir sayfanın başka bir yerinde (ama popover kendisini değil!) ile popover yakın olmak istiyorum.

Birkaç farklı şey, aşağıdaki, ama bunu göstermek için hiçbir sonuç dahil olmak üzere çalıştım:

$('body').click(function(e) {
    $('.popup-marker').popover('hide');
});

Nasıl tıklayın tam bir popover ile bir sayfanın başka yerinde, ama popover yakın kendisi miyim?

CEVAP

20 Ocak 2012, Cuma

Sadece bir popover herhangi bir zamanda görülebilir küstah, bayraklar bir popover görünür olduğunda mark, ve sadece onları gizlemek için daha sonra kullanabilirsiniz.

Eğer belge cesedi olay dinleyici ayarlarsanız, öğe işaretli ile tıkladığınızda tetikler 'pop-up-marker'. Olay stopPropagation() nesne aramak zorunda kalacaksın. Ve popover kendisi basıldığı zaman aynı taktiği uygulayın.

Aşağıda, bu çalışma bir JavaScript kodu. JQuery ^ kullanır . = 1.7

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;
    });
});