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
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 :-)
Nasıl benim fare giriyor kadar Twitter...
Nasıl Twitter Bootstrap kalıcı bir kut...
Nasıl bir tuval öğesi üzerinde fare bi...
Nasıl dışarıda tıklayarak Twitter Boot...
Nasıl benim Twitter sağa Hizala düğmel...