Czy możemy sprawić, by popovers były usuwalne w taki sam sposób jak modały, tj. zamknąć je, gdy użytkownik kliknie gdzieś poza nimi?

Niestety nie mogę po prostu użyć prawdziwego modalu zamiast popovera, ponieważ modal oznacza position: fixed i nie byłoby już popovera. :(

Aktualizacja: nieco bardziej niezawodne rozwiązanie: http://jsfiddle.net/mattdlockyer/C5GBU/72/

W przypadku przycisków zawierających tylko tekst:

$('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');
    }
});

W przypadku przycisków zawierających ikony (ten kod zawiera błąd w programie Bootstrap 3.3.6, zobacz poprawkę poniżej w tej odpowiedzi)

$('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');
        }
    });

Dla JS Generowane Popovers Użyj '[data-original-title]'zamiast'[data-toggle="popover"]'

Zastrzeżenie: powyższe rozwiązanie umożliwia otwieranie wielu popoverów jednocześnie.

Jeden popover na raz:

Aktualizacja: Bootstrap 3.0.x, zobacz kod lub skrzypce 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');
        }
    });
});

To obsługuje zamykanie okien pop-up, które są już otwarte i nie kliknięte lub ich łącza nie zostały kliknięte.

Aktualizacja: Bootstrap 3.3.6, patrz skrzypce

Naprawiono problem polegający na tym, że po zamknięciu potrzeba 2 kliknięć, aby ponownie otworzyć

$(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
        }

    });
});

Aktualizacja: Wykorzystując warunek poprzedniego ulepszenia, to rozwiązanie zostało osiągnięte. Napraw problem podwójnego kliknięcia i wyskakującego widma:

$(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');
        });
    }
});

Spowoduje to zamknięcie wszystkich okien wyskakujących, jeśli klikniesz w dowolnym miejscu oprócz okna wyskakującego

AKTUALIZACJA Bootstrap 4.1

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

Najprostsza, najbardziej odporna na awarie wersja , działa z każdą wersją bootstrap.

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

Demo 2: Nie odrzuca się po kliknięciu wewnątrz zawartości popover http://jsfiddle.net/guya/fjZja/

Demo 3: Wiele popovers: http://jsfiddle.net/guya/6YCjW/

Samo wywołanie tej linii spowoduje odrzucenie wszystkich popoverów:

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

Odrzuć wszystkie okna wyskakujące po kliknięciu na zewnątrz za pomocą tego kodu:

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

Fragment powyżej dołącza zdarzenie kliknięcia do treści. Gdy użytkownik kliknie popovera, będzie on zachowywał się normalnie. Kiedy użytkownik kliknie na coś, co nie jest popover, zamknie wszystkie popovers.

Będzie również działał z popoverami, które są inicjowane przez Javascript, w przeciwieństwie do niektórych innych przykładów, które nie będą działać. (patrz demo)

Jeśli nie chcesz odrzucić, klikając wewnątrz zawartości popover, użyj tego kodu (patrz link do 2. wersji demo):

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

W bootstrap 2.3.2 możesz ustawić wyzwalacz na „focus” i to po prostu działa:

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

Zasadniczo nie jest to zbyt skomplikowane, ale należy wykonać pewne czynności kontrolne, aby uniknąć usterki.

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

Żadne z rzekomo wysoko głosowanych rozwiązań nie działało dla mnie poprawnie. Każda z nich powoduje błąd, gdy po otwarciu i zamknięciu (klikając inne elementy) popover po raz pierwszy nie otwiera się ponownie, dopóki nie utworzysz dwóch klikniesz linku wyzwalającego zamiast jednego.

Więc nieznacznie go zmodyfikowałem:

$(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');
        }
    });
})

Zrobiłem jsfiddle, aby pokazać ci, jak to zrobić:

http://jsfiddle.net/3yHTH/

Chodzi o to, aby pokazać popover po kliknięciu przycisku i ukryć popover po kliknięciu poza przyciskiem.

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

po prostu dodaj ten atrybut do elementu

data-trigger="focus"

Ten został poproszony przed tutaj . Ta sama odpowiedź, którą podałem, nadal obowiązuje:

Miałem podobną potrzebę i znalazłem to świetne małe rozszerzenie Twitter Bootstrap Popover autorstwa Lee Carmichaela, o nazwie BootstrapX - kliknięcie . Ma też kilka przykładów wykorzystania tutaj . Zasadniczo zmieni popover w interaktywny komponent, który zamknie się po kliknięciu w inne miejsce strony lub na przycisku zamykania w popover. Umożliwi to również otwieranie wielu okien pop-up jednocześnie i wiele innych ciekawych funkcji.

Na przyjęcie jest już późno ... ale pomyślałem, że się z tym podzielę. Uwielbiam popover, ale ma tak mało wbudowanej funkcjonalności. Napisałem rozszerzenie bootstrap .bubble (), czyli wszystko, co chciałbym, żeby był popover. Cztery sposoby na zwolnienie. Kliknij na zewnątrz, przełącz na link, kliknij X i naciśnij Escape.

Ustawia się automatycznie, więc nigdy nie znika ze strony.

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

To nie jest nieodpłatna autopromocja ... Wiele razy w życiu chwytałem kod innych ludzi, chciałem zaoferować własne wysiłki. Daj mu wir i sprawdź, czy to działa dla Ciebie.

Według http://getbootstrap.com/javascript/#popovers ,

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

Użyj wyzwalacza aktywności, aby odrzucić wyskakujące okienka przy następnym kliknięciu, które wykona użytkownik.

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

Zmodyfikowane zaakceptowane rozwiązanie. To, czego doświadczyłem, to fakt, że po ukryciu niektórych programów typu popover trzeba je dwukrotnie kliknąć, aby wyświetlić się ponownie. Oto, co zrobiłem, aby upewnić się, że popover („hide”) nie jest wywoływany w już ukrytych popoverach.

$('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
            }
        }
    });
});

Wystarczy dodać ten atrybut do elementu HTML, aby zamknąć popover w następnym kliknięciu.

data-trigger="focus"

referencja z https://getbootstrap.com/docs/3.3/javascript/#popovers

To rozwiązanie działa dobrze:

$("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(); });

Możesz także użyć opcji bubbingu zdarzeń, aby usunąć wyskakujące okienko z DOM. Jest trochę brudny, ale działa dobrze.

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

W swoim html dodaj klasę .popover-close do treści w oknie popover, które powinno je zamknąć.

Wygląda na to, że metoda „ukryj” nie działa, jeśli utworzysz popover z delegacją selektora, zamiast tego należy użyć opcji „zniszczyć”.

Sprawiłem, że działa tak:

$('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');
        }
    });
});

JSfiddle tutaj

Dowiedzieliśmy się, że mamy problem z rozwiązaniem @mattdlockyer (dzięki za rozwiązanie!). Podczas korzystania z właściwości selektora dla konstruktora popover w ten sposób ...

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

... proponowane rozwiązanie dla BS3 nie będzie działać. Zamiast tego tworzy drugą instancję popover lokalną dla niego $(this). Oto nasze rozwiązanie, aby temu zapobiec:

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

Jak wspomniano $(this).popover('hide');, utworzy drugą instancję z powodu delegowanego odbiornika. Podane rozwiązanie ukrywa tylko pop-upy, które są już zaimplementowane.

Mam nadzieję, że zaoszczędzę wam trochę czasu.

Bootstrap natywnie obsługuje to :

JS Bin Demo

Określony znacznik wymagany do odwołania przy następnym kliknięciu

Dla prawidłowego przekroju przeglądarce i zachowania cross-platform, należy użyć <a>znacznika, nie<button> znacznika, a także musi zawierać role="button"i tabindexatrybuty.

to rozwiązanie pozwala pozbyć się przykrych, drugich kliknięć podczas wyświetlania popovera po raz drugi

testowane z Bootstrap v3.3.7

$('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();                
        }
    });
});

Próbowałem wielu wcześniejszych odpowiedzi, naprawdę nic dla mnie nie działa, ale to rozwiązanie:

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

Zalecają używanie tagu kotwicy, a nie przycisku i dbanie o atrybuty role = "button" + data-trigger = "focus" + tabindex = "0".

Dawny:

<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>

Wymyśliłem to: mój scenariusz zawierał więcej popoverów na tej samej stronie, a ukrywanie ich po prostu czyniło ich niewidocznymi, dlatego klikanie elementów za popoverem nie było możliwe. Chodzi o to, aby oznaczyć konkretny link popover jako „aktywny”, a następnie możesz po prostu „przełączyć” aktywny popover. Spowoduje to całkowite zamknięcie okna popover $ ('. 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"

Po prostu usuwam inne aktywne programy popover przed wyświetleniem nowego programu popover (bootstrap 3):

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

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

testowane z 3.3.6 i drugie kliknięcie jest w porządku

        $('[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;
});

}

to jest moje rozwiązanie.

Takie podejście zapewnia zamknięcie okna popover przez kliknięcie w dowolnym miejscu na stronie. Kliknięcie innego elementu, który można kliknąć, powoduje ukrycie wszystkich innych okien podręcznych. Animacja: fałsz jest wymagana, w przeciwnym razie otrzymasz komunikat jquery .remove w konsoli.

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

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

Ok, to moja pierwsza próba odpowiedzi na pytanie o przepełnienie stosu, więc tutaj nic nie idzie: P

Wygląda na to, że nie jest całkiem jasne, czy ta funkcja faktycznie działa od razu na najnowszym bootstrapie (cóż, jeśli chcesz pójść na kompromis, gdzie użytkownik może kliknąć. Nie jestem pewien, czy musisz kliknąć „kliknij” najedź myszą per se, ale na iPadzie kliknięcie działa jak przełącznik.

Rezultatem końcowym jest najechanie myszką lub kliknięcie na pulpicie (większość użytkowników najedzie kursorem). Dotknięcie elementu na urządzeniu dotykowym spowoduje jego podniesienie, a ponowne dotknięcie go zdejmie. Oczywiście jest to niewielki kompromis w stosunku do twojego pierwotnego wymagania, ale przynajmniej twój kod jest teraz czystszy :)

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

Biorąc kod Matta Lockyera, wykonałem prosty reset, aby dom nie był objęty elementem ukrywania.

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

Fiddle: 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');
        }
    });
});

Spróbuj tego, ukryje się, klikając na zewnątrz.

$('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');
    }
    });
});

Miałem problemy z rozwiązaniem mattdlockyer, ponieważ dynamicznie konfigurowałem linki popover przy użyciu kodu w następujący sposób:

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

Musiałem to tak zmodyfikować. Naprawiono dla mnie wiele problemów:

$('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');
    }
  });
});

Pamiętaj, że zniszczenie pozbywa się elementu, więc część selektora jest ważna przy inicjowaniu popoverów.