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

http://jsfiddle.net/AFffL/539/

Sadece ihtar aynı anda 2 çörek açmak için mümkün olmayacaktır. Ama bu kullanıcı için zaten kafa karıştırıcı olacağını düşünüyorum :-)

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Amazon Web Services

    Amazon Web S

    8 NİSAN 2009
  • Muse

    Muse

    28 EYLÜL 2006
  • Neil Cicierega

    Neil Ciciere

    22 Mart 2006