Können wir Popovers dazu bringen, auf die gleiche Weise wie Modals entlassen zu werden, d. H. sie schließen, wenn der Benutzer irgendwo außerhalb von ihnen klickt?

Leider kann ich nicht einfach echtes Modal anstelle von Popover verwenden, da Modal Position bedeutet: fest und das wäre kein Popover mehr. :((

Update: Eine etwas robustere Lösung: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Für Schaltflächen, die nur Text enthalten:

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

Für Schaltflächen mit Symbolen verwenden (dieser Code hat einen Fehler in Bootstrap 3.3.6, siehe den Fix unten in dieser Antwort)

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

Für JS-generierte Popover Verwenden Sie '[data-original-title]'anstelle von'[data-toggle="popover"]'

Vorsichtsmaßnahme: Mit der obigen Lösung können mehrere Popover gleichzeitig geöffnet werden.

Ein Popover nach dem anderen bitte:

Update: Bootstrap 3.0.x, siehe Code oder Geige 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');
        }
    });
});

Dies behandelt das Schließen von Popovers, die bereits geöffnet und nicht angeklickt sind oder deren Links nicht angeklickt wurden.

Update: Bootstrap 3.3.6, siehe Geige

Behebt ein Problem, bei dem nach dem Schließen 2 Klicks zum erneuten Öffnen erforderlich sind

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

    });
});

Update: Unter der Bedingung der vorherigen Verbesserung wurde diese Lösung erreicht. Beheben Sie das Problem von Doppelklick und Ghost Popover:

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

Dadurch werden alle Popovers geschlossen, wenn Sie auf eine beliebige Stelle außer auf ein Popover klicken

UPDATE für 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");
        });
    }
});

Die einfachste und ausfallsicherste Version funktioniert mit jeder Bootstrap-Version.

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

Demo 2: Nicht schließen, wenn Sie in den Popover-Inhalt klicken http://jsfiddle.net/guya/fjZja/

Demo 3: Mehrere Popover: http://jsfiddle.net/guya/6YCjW/

Durch einfaches Aufrufen dieser Leitung werden alle Popover geschlossen:

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

Schließen Sie alle Popover, wenn Sie mit diesem Code nach draußen klicken:

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

Das obige Snippet fügt dem Körper ein Klickereignis hinzu. Wenn der Benutzer auf ein Popover klickt, verhält es sich wie gewohnt. Wenn der Benutzer auf etwas klickt, das kein Popover ist, werden alle Popover geschlossen.

Es funktioniert auch mit Popovers, die mit Javascript initiiert wurden, im Gegensatz zu einigen anderen Beispielen, die nicht funktionieren. (siehe Demo)

Wenn Sie beim Klicken in den Popover-Inhalt nicht schließen möchten, verwenden Sie diesen Code (siehe Link zur 2. 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');
  }
});

Mit Bootstrap 2.3.2 können Sie den Trigger auf "Fokus" setzen und es funktioniert einfach:

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

Dies ist im Grunde nicht sehr komplex, aber es gibt einige Überprüfungen, um Störungen zu vermeiden.

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

Keine der vermeintlich hochstimmigen Lösungen hat bei mir richtig funktioniert. Jedes führt zu einem Fehler, wenn das Popover nach dem ersten Öffnen und Schließen (durch Klicken auf andere Elemente) zum ersten Mal wieder geöffnet wird, bis Sie zwei erstellen Klicks auf den auslösenden Link anstatt auf einen machen.

Also habe ich es leicht modifiziert:

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

Ich habe eine jsfiddle gemacht, um dir zu zeigen, wie es geht:

http://jsfiddle.net/3yHTH/

Die Idee ist, das Popover anzuzeigen, wenn Sie auf die Schaltfläche klicken, und das Popover auszublenden, wenn Sie außerhalb der Schaltfläche klicken.

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

Fügen Sie dieses Attribut einfach dem Element hinzu

data-trigger="focus"

Dies wurde vor gefragt hier . Die gleiche Antwort, die ich damals gegeben habe, gilt immer noch:

Ich hatte ein ähnliches Bedürfnis und fand diese tolle kleine Erweiterung des Twitter Bootstrap Popover von Lee Carmichael namens BootstrapX - Clickover . Er hat hier auch einige Anwendungsbeispiele . Grundsätzlich wird das Popover in eine interaktive Komponente umgewandelt, die geschlossen wird, wenn Sie auf eine andere Stelle auf der Seite oder auf eine Schaltfläche zum Schließen innerhalb des Popovers klicken. Dies ermöglicht auch das gleichzeitige Öffnen mehrerer Popover und eine Reihe weiterer nützlicher Funktionen.

Das ist spät zur Party ... aber ich dachte, ich würde es teilen. Ich liebe das Popover, aber es hat so wenig eingebaute Funktionalität. Ich habe eine Bootstrap-Erweiterung .bubble () geschrieben, die genau das ist, was Popover sein soll. Vier Möglichkeiten zu entlassen. Klicken Sie nach draußen, schalten Sie den Link um, klicken Sie auf das X und drücken Sie die Esc-Taste.

Es wird automatisch positioniert, sodass es nie von der Seite verschwindet.

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

Dies ist keine unentgeltliche Eigenwerbung ... Ich habe so oft in meinem Leben den Code anderer Leute gepackt, dass ich meine eigenen Anstrengungen anbieten wollte. Probieren Sie es aus und sehen Sie, ob es für Sie funktioniert.

Laut http://getbootstrap.com/javascript/#popovers ,

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

Verwenden Sie den Fokus-Trigger, um Popover beim nächsten Klick des Benutzers zu schließen.

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

Modifizierte akzeptierte Lösung. Was ich erlebt habe war, dass einige Popover, nachdem sie ausgeblendet wurden, zweimal angeklickt werden mussten, um wieder angezeigt zu werden. Folgendes habe ich getan, um sicherzustellen, dass Popover ('hide') nicht für bereits versteckte Popover aufgerufen wird.

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

Fügen Sie dieses Attribut einfach dem HTML-Element hinzu, um das Popover beim nächsten Klick zu schließen.

data-trigger="focus"

Referenz von https://getbootstrap.com/docs/3.3/javascript/#popovers

Diese Lösung funktioniert gut:

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

Sie können auch Ereignisblasen verwenden, um das Popup aus dem DOM zu entfernen. Es ist ein bisschen schmutzig, funktioniert aber gut.

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

Fügen Sie in Ihrem HTML-Code die .popover-close-Klasse zum Inhalt des Popovers hinzu, der das Popover schließen soll.

Es scheint, dass die Methode 'hide' nicht funktioniert, wenn Sie das Popover mit Selektordelegation erstellen. Stattdessen muss 'destroy' verwendet werden.

Ich habe es so gemacht:

$('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 hier

Wir fanden heraus, dass wir ein Problem mit der Lösung von @mattdlockyer hatten (danke für die Lösung!). Wenn Sie die Selector-Eigenschaft für den Popover-Konstruktor wie folgt verwenden ...

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

... die vorgeschlagene Lösung für BS3 wird nicht funktionieren. Stattdessen wird eine zweite lokale Popover-Instanz erstellt $(this). Hier ist unsere Lösung, um dies zu verhindern:

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

Wie bereits erwähnt, $(this).popover('hide');wird aufgrund des delegierten Listeners eine zweite Instanz erstellt. Die bereitgestellte Lösung verbirgt nur Popovers, die bereits instanziiert sind.

Ich hoffe ich konnte euch etwas Zeit sparen.

Bootstrap unterstützt dies nativ :

JS Bin Demo

Spezifisches Markup für das Schließen beim nächsten Klicken erforderlich

Für ein korrektes browser- und plattformübergreifendes Verhalten müssen Sie das <a>Tag und nicht das <button>Tag verwenden und die Attribute role="button"und einschließen tabindex.

Diese Lösung beseitigt den lästigen zweiten Klick, wenn das Popover zum zweiten Mal angezeigt wird

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

Ich habe viele der vorherigen Antworten ausprobiert, wirklich nichts funktioniert für mich, aber diese Lösung hat:

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

Sie empfehlen, das Ankertag nicht die Schaltfläche zu verwenden und sich um die Attribute role = "button" + data-trigger = "focus" + tabindex = "0" zu kümmern.

Ex:

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

Ich habe mir Folgendes ausgedacht: Mein Szenario enthielt mehr Popover auf derselben Seite, und das Ausblenden machte sie nur unsichtbar. Aus diesem Grund war es nicht möglich, auf Elemente hinter dem Popover zu klicken. Die Idee ist, den spezifischen Popover-Link als "aktiv" zu markieren und dann können Sie den aktiven Popover einfach "umschalten". Dadurch wird das Popover vollständig geschlossen. $ ('. 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"

Ich entferne einfach andere aktive Popover, bevor das neue Popover angezeigt wird (Bootstrap 3):

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

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

getestet mit 3.3.6 und zweiter Klick ist ok

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

}}

Das ist meine Lösung dafür.

Dieser Ansatz stellt sicher, dass Sie ein Popover schließen können, indem Sie auf eine beliebige Stelle auf der Seite klicken. Wenn Sie auf eine andere anklickbare Entität klicken, werden alle anderen Popover ausgeblendet. Die Animation: false ist erforderlich, andernfalls wird in Ihrer Konsole der Fehler jquery .remove angezeigt.

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

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

Ok, dies ist mein erster Versuch, tatsächlich etwas über den Stapelüberlauf zu beantworten. Hier geht also nichts: P.

Es scheint nicht ganz klar zu sein, dass diese Funktionalität auf dem neuesten Bootstrap sofort funktioniert (na ja, wenn Sie bereit sind, Kompromisse einzugehen, wo die der Benutzer klicken kann. Ich bin mir nicht sicher, ob Sie klicken müssen Bewegen Sie den Mauszeiger per se, aber auf einem iPad funktioniert das Klicken als Umschalter.

Das Endergebnis ist, dass Sie auf einem Desktop den Mauszeiger bewegen oder klicken können (die meisten Benutzer bewegen den Mauszeiger). Wenn Sie auf einem Touch-Gerät das Element berühren, wird es aufgerufen, und wenn Sie es erneut berühren, wird es heruntergenommen. Natürlich ist dies ein kleiner Kompromiss gegenüber Ihrer ursprünglichen Anforderung, aber zumindest ist Ihr Code jetzt sauberer :)

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

Ich habe Matt Lockyers Code genommen und einen einfachen Reset durchgeführt, damit der Dom nicht durch das versteckte Element abgedeckt wird.

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

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

Versuchen Sie dies, dies wird ausgeblendet, indem Sie nach draußen klicken.

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

Ich hatte Probleme mit der Lösung von mattdlockyer, weil ich Popover-Links dynamisch mit Code wie dem folgenden eingerichtet habe:

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

Also musste ich es so modifizieren. Es hat viele Probleme für mich behoben:

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

Denken Sie daran, dass durch Zerstören das Element entfernt wird. Daher ist der Auswahlteil beim Initialisieren der Popovers wichtig.