Popoverlerin modals ile aynı şekilde görevden alınmasını sağlayabilir miyiz, yani. kullanıcı dışında bir yere tıkladığında onları kapatır mısın?

Ne yazık ki popover yerine sadece gerçek modal kullanamıyorum, çünkü modal pozisyon anlamına gelir: sabit ve artık popover olmaz. :(

Güncelleme: Biraz daha sağlam bir çözüm: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Yalnızca metin içeren düğmeler için:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

Simgeleri içeren düğmeler için (bu kod Bootstrap 3.3.6'da bir hata içeriyorsa , bu yanıtta aşağıdaki düzeltmeye bakın)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

JS Popovers Oluşturulan için kullanın '[data-original-title]'yerine'[data-toggle="popover"]'

Uyarı: Yukarıdaki çözüm, birden fazla poposun aynı anda açılmasına izin verir.

Bir seferde bir popover lütfen:

Güncelleme: Bootstrap 3.0.x, kod veya keman bakın http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Bu, zaten açık olan ve tıklanmayan popover'ların kapanmasını veya bağlantılarının tıklanmadığını ele alır.

Güncelleme: Bootstrap 3.3.6, keman

Kapandıktan sonra yeniden açmak için 2 tıklama alması sorunu giderildi

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

Güncelleme: Önceki iyileştirmenin koşullarını kullanarak bu çözüme ulaşıldı. Çift tıklama ve hayalet popover sorununu giderin:

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

Bir popover dışında herhangi bir yeri tıklarsanız tüm popovers kapanır

Bootstrap 4.1 için GÜNCELLEME

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

En basit, en başarısız güvenli sürüm , herhangi bir bootstrap sürümü ile çalışır.

Demo: http://jsfiddle.net/guya/24mmM/

Demo 2: Popover içeriğinin içini tıklarken reddetmemek http://jsfiddle.net/guya/fjZja/

Demo 3: Birden çok popover: http://jsfiddle.net/guya/6YCjW/

Bu hattı çağırmak tüm popovers'ları yok edecek:

$('[data-original-title]').popover('hide');

Bu kodla dışarıya tıkladığınızda tüm popovers'ları yoksay:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

Yukarıdaki snippet, gövdeye bir tıklama etkinliği ekler. Kullanıcı bir popover'ı tıkladığında normal şekilde davranır. Kullanıcı popover olmayan bir şeye tıkladığında tüm popovers kapanacaktır.

Ayrıca, çalışmayacak diğer bazı örneklerin aksine, Javascript ile başlatılan popoverlarla da çalışacaktır. (demoya bakınız)

Popover içeriğinin içini tıklarken reddetmek istemiyorsanız, bu kodu kullanın (2. demo bağlantısına bakın):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

Bootstrap 2.3.2 ile tetiği 'odaklama' olarak ayarlayabilirsiniz ve sadece çalışır:

$('#el').popover({trigger:'focus'});

Bu temelde çok karmaşık değil, ancak aksaklıklardan kaçınmak için bazı kontroller var.

Demo (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});

Sözde yüksek oy alan çözümlerin hiçbiri benim için doğru sonuç vermedi. Her biri, popover'ı ilk kez açıp kapattıktan sonra (diğer öğeleri tıklatarak) bir hataya neden olur, siz tetikleyici bağlantıya bir yerine iki tıklama yapana kadar tekrar açılmaz .

Bu yüzden biraz değiştirdim:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

Size nasıl yapılacağını göstermek için bir jsfiddle yaptım:

http://jsfiddle.net/3yHTH/

Fikir, düğmeyi tıkladığınızda popover'ı göstermek ve düğmenin dışını tıkladığınızda popover'ı gizlemektir.

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

bu özelliği öğeyle birlikte eklemeniz yeterlidir

data-trigger="focus"

Bu daha önce burada sorulmuştu . Verdiğim aynı cevap hala geçerli:

Benzer bir ihtiyacım vardı ve Lee Carmichael'ın BootstrapX - clickover adlı Twitter Bootstrap Popover'ın bu küçük uzantısını buldum . Burada da bazı kullanım örnekleri var . Temel olarak, popover'ı sayfanın başka bir yerine veya popover içindeki bir kapat düğmesine tıkladığınızda kapanacak etkileşimli bir bileşene dönüştürür. Bu aynı zamanda birden fazla poposun aynı anda açılmasına ve diğer birçok güzel özelliğe izin verecektir.

Bu partiye geç kaldı ... ama paylaşacağımı düşündüm. Popover'ı seviyorum ama çok az yerleşik işlevselliğe sahip. Popover olmasını istediğim her şey olan bir bootstrap uzantısı .bubble () yazdım. İşten çıkarmanın dört yolu. Dışarıya tıklayın, bağlantıya geçin, X'e tıklayın ve kaçışa basın.

Hiçbir zaman sayfadan çıkmaması için otomatik olarak konumlandırılır.

https://github.com/Itumac/bootstrap-bubble

Bu zahmetli bir öz tanıtım değil ... Hayatımda birçok kez başkalarının kodlarını aldım, kendi çabalarımı sunmak istedim. Bir koşuşturma verin ve sizin için işe yarayıp yaramadığını görün.

Göre http://getbootstrap.com/javascript/#popovers ,

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

Kullanıcının bir sonraki tıklamasında popo'ları kapatmak için odak tetikleyicisini kullanın.

$('.popover-dismiss').popover({
    trigger: 'focus'
})

Değiştirilmiş kabul edilmiş çözüm. Yaşadığım şey, bazı popovers gizlendikten sonra tekrar göstermek için iki kez tıklanması gerektiğiydi. İşte popover'ın ('hide') zaten gizli popoverlarda çağrılmadığından emin olmak için yaptığım şey.

$('body').on('click', function (e) {
    $('[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});

Bir sonraki tıklamayla popover'ı kapatmak için bu özelliği html öğesine ekleyin.

data-trigger="focus"

https://getbootstrap.com/docs/3.3/javascript/#popovers adresinden referans

Bu çözüm iyi çalışıyor:

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

$("body")   .on('click'  , function(e) {
        $('[data-toggle="popover"]').popover('hide');
});

jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

Ayrıca, açılır pencereyi DOM'dan kaldırmak için etkinlik köpürmeyi de kullanabilirsiniz. Biraz kirli, ama iyi çalışıyor.

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

Html'nizde, popover'ın içindeki popover'ı kapatması gereken içeriğe .popover-close sınıfını ekleyin.

Seçici temsilci ile popover oluşturursanız, 'hide' yöntemi işe yaramaz gibi görünür, bunun yerine 'destroy' kullanılmalıdır.

Ben böyle yaptım:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

JS Burada keman yapın

@Mattdlockyer'den çözümle ilgili bir sorun yaşadığımızı öğrendik (çözüm için teşekkürler!). Böyle popover yapıcısı için selector özelliğini kullanırken ...

$(document.body').popover({selector: '[data-toggle=popover]'});

... BS3 için önerilen çözüm işe yaramaz. Bunun yerine, yerel bir ikinci popover örneği oluşturur $(this). İşte bunu önlemek için çözümümüz:

$(document.body).on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

Belirtildiği gibi $(this).popover('hide');, delege edilen dinleyici nedeniyle ikinci bir örnek oluşturur. Sunulan çözüm yalnızca önceden başlatılmış popovers gizler.

Umarım sizleri biraz kurtarabilirim.

Bootstrap bunu doğal olarak destekler :

JS Bin Demosu

Bir sonraki tıklamayla reddetme için özel işaretleme gerekir

Uygun çapraz tarayıcı ve çapraz platform davranış için, kullanmanız gerekir <a>etiketi, değil<button> etiket ve ayrıca içermelidir role="button"ve tabindexözelliklerini.

bu çözüm popover ikinci kez gösterilirken sinir bozucu 2. tıklama kurtulmak

Bootstrap v3.3.7 ile test edilmiştir

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});

Önceki cevapların çoğunu denedim, gerçekten hiçbir şey benim için çalışmıyor ama bu çözüm işe yaradı:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

Düğmeyi değil bağlantı etiketini kullanmanızı ve role = "button" + data-trigger = "focus" + tabindex = "0" özelliklerine dikkat etmelerini önerirler.

Ör:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

Ben bununla geldim: Senaryomda aynı sayfada daha fazla popover vardı ve onları gizlemek onları görünmez yaptı ve bu nedenle popover'ın arkasındaki öğelere tıklamak mümkün değildi. Fikir, belirli popover bağlantısını 'aktif' olarak işaretlemektir ve daha sonra aktif popover'ı 'değiştirebilirsiniz'. Bunu yapmak popover'ı tamamen kapatacak $ ('. Popover-link'). Popover ({html: true, container: 'body'})

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

Ben sadece yeni popover gösterilmeden önce diğer aktif popovers kaldırmak (bootstrap 3):

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              

3.3.6 ile test edildi ve ikinci tıklama tamam

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

        $(document).on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

demo: http://jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

bu benim çözümüm.

Bu yaklaşım, sayfanın herhangi bir yerini tıklayarak bir popover'ı kapatmanızı sağlar. Başka bir tıklanabilir varlığı tıklarsanız, diğer tüm popovers gizlenir. Animasyon: false gereklidir, aksi takdirde konsolunuzda bir jquery .remove hatası alırsınız.

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

Tamam bu aslında stackoverflow bir şey cevaplamak için ilk denemem bu yüzden burada hiçbir şey gitmez

Görünüşe göre bu işlevin aslında en son önyüklemedeki kutudan çıktığı açıkça görülmüyor (yani, nerede uzlaşmak istiyorsanız kullanıcının tıklayabileceği istiyorsanız, 'click' fareyle üzerine gelindiğinde, ancak bir iPad'de, tıklatma geçiş olarak çalışır.

Sonuç, masaüstünde fareyle üzerine gelinebilir veya tıklayabilirsiniz (çoğu kullanıcı fareyle üzerine gelir). Dokunmatik bir cihazda, öğeye dokunmak öğeyi getirir ve tekrar dokunmak öğeyi aşağı indirir. Tabii ki, bu orijinal gereksiniminizden hafif bir uzlaşma ama en azından kodunuz artık daha temiz :)

$ (". my-popover"). popover ({trigger: 'click hover'});

Matt Lockyer'ın kodunu alarak, basit bir sıfırlama yaptım, böylece dom gizle üzerindeki öğe tarafından kaplanmıyor.

Matt'in kodu: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

Keman: http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Bunu deneyin, bu dışarıya tıklayarak gizlenecektir.

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
    $(this).popover('hide');
    }
    });
});

Ben dinamik olarak böyle kodu kullanarak popover bağlantıları kuruyordum çünkü mattdlockyer çözüm ile ilgili sorunlar yaşıyordu:

$('body').popover({
        selector : '[rel="popover"]'
});

Bu yüzden böyle değiştirmek zorunda kaldım. Benim için birçok sorunu düzeltti:

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('destroy');
    }
  });
});

Yıkmanın elemandan kurtulduğunu unutmayın, bu yüzden seçici kısım popovers'ı başlatmada önemlidir.