So fügen Sie die Schaltfläche zum Schließen in Popover für Bootstrap ein

JS:

$(function(){
  $("#example").popover({
    placement: 'bottom',
    html: 'true',
    title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>',
    content : 'test'
  })
  $('html').click(function() {
    $('#close').popover('hide');
  });
});

HTML:

<button type="button" id="example" class="btn btn-primary" ></button>

Ich schreibe, dein Code zeigt dein Popup nicht.

Ist jemand auf dieses Problem gestoßen?

Sie müssen das Markup richtig machen

<button type="button" id="example" class="btn btn-primary">example</button>

Eine Möglichkeit besteht darin, den Close-Handler im Element selbst anzuhängen. Die folgenden Funktionen funktionieren:

$(document).ready(function() {
    $("#example").popover({
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span>'+
                '<button type="button" id="close" class="close" onclick="$(&quot;#example&quot;).popover(&quot;hide&quot;);">&times;</button>',
        content : 'test'
    });
});  

Ich musste etwas finden, das für mehrere Popover und in Bootstrap 3 funktioniert.

Folgendes habe ich getan:

Ich hatte mehrere Elemente, für die ich ein Popover haben wollte, also wollte ich keine IDs verwenden.

Das Markup könnte sein:

<button class="btn btn-link foo" type="button">Show Popover 1</button>
<button class="btn btn-link foo" type="button">Show Popover 2</button>
<button class="btn btn-link foo" type="button">Show Popover 3</button>

Der Inhalt für die Schaltflächen zum Speichern und Schließen im Popover:

var contentHtml = [
    '<div>',
        '<button class="btn btn-link cancel">Cancel</button>',
        '<button class="btn btn-primary save">Save</button>',
    '</div>'].join('\n');

und das Javascript für alle 3 Schaltflächen:

Diese Methode funktioniert, wenn der Container standardmäßig nicht an body angehängt ist.

$('.foo').popover({
    title: 'Bar',
    html: true,
    content: contentHtml,
    trigger: 'manual'
}).on('shown.bs.popover', function () {
    var $popup = $(this);
    $(this).next('.popover').find('button.cancel').click(function (e) {
        $popup.popover('hide');
    });
    $(this).next('.popover').find('button.save').click(function (e) {
        $popup.popover('hide');
    });
});

Wenn der Behälter an "Körper" befestigt ist

Verwenden Sie dann die von beschriebene Arie, um das Popup zu finden und es auszublenden.

$('.foo').popover({
    title: 'Bar',
    html: true,
    content: contentHtml,
    container: 'body',
    trigger: 'manual'
}).on('shown.bs.popover', function (eventShown) {
    var $popup = $('#' + $(eventShown.target).attr('aria-describedby'));
    $popup.find('button.cancel').click(function (e) {
        $popup.popover('hide');
    });
    $popup.find('button.save').click(function (e) {
        $popup.popover('hide');
    });
});

Ich fand andere Antworten entweder nicht allgemein genug oder zu kompliziert. Hier ist eine einfache, die immer funktionieren sollte (für Bootstrap 3):

$('[data-toggle="popover"]').each(function () {
    var button = $(this);
    button.popover().on('shown.bs.popover', function() {
        button.data('bs.popover').tip().find('[data-dismiss="popover"]').on('click', function () {
            button.popover('toggle');
        });
    });
});

Fügen Sie dann einfach ein Attribut data-dismiss="popover"in Ihre Schaltfläche zum Schließen ein. Stellen Sie außerdem sicher, dass Sie es nicht an popover('hide')anderer Stelle in Ihrem Code verwenden, da es das Popup verbirgt, aber seinen internen Status im Bootstrap-Code nicht richtig festlegt, was bei der nächsten Verwendung zu Problemen führen kann popover('toggle').

Vorherige Beispiele haben zwei Hauptnachteile:

1. Die Schaltfläche 'Schließen' muss in irgendeiner Weise die ID des referenzierten Elements kennen.
2. Die Notwendigkeit, dem Ereignis 'selected.bs.popover' einen 'Klick'-Listener zum Schließen hinzuzufügen; Dies ist auch keine gute Lösung, da Sie dann jedes Mal, wenn das Popover angezeigt wird, einen solchen Listener hinzufügen würden.

Nachfolgend finden Sie eine Lösung, die keine derartigen Nachteile aufweist.

Standardmäßig wird das 'Popover'-Element unmittelbar nach dem referenzierten Element im DOM eingefügt (beachten Sie dann, dass das referenzierte Element und das Popover unmittelbare Geschwisterelemente sind). Wenn Sie also auf die Schaltfläche "Schließen" klicken, können Sie einfach nach dem nächstgelegenen übergeordneten Element "div.popover" und dann nach dem unmittelbar vorhergehenden Geschwisterelement dieses übergeordneten Elements suchen.

Fügen Sie einfach den folgenden Code in den 'onclick'-Handler der' close'-Schaltfläche ein:

$(this).closest('div.popover').popover('hide');

Beispiel:

var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').popover(\'hide\');" type="button" class="close" aria-hidden="true">&times;</button>';

$loginForm.popover({
    placement: 'auto left',
    trigger: 'manual',
    html: true,
    title: 'Alert' + genericCloseBtnHtml,
    content: 'invalid email and/or password'
});

Folgendes habe ich gerade in meinem Projekt verwendet. Und ich hoffe, es kann Ihnen helfen

<a id="manualinputlabel" href="#" data-toggle="popover" title="weclome to use the sql quer" data-html=true  data-original-title="weclome to use the sql query" data-content="content">example</a>


$('#manualinputlabel').click(function(e) {
              $('.popover-title').append('<button id="popovercloseid" type="button" class="close">&times;</button>');
              $(this).popover();

          });

      $(document).click(function(e) {
         if(e.target.id=="popovercloseid" )
         {
              $('#manualinputlabel').popover('hide');                
         }

      });

Ich habe viele der genannten Codebeispiele überprüft und für mich funktioniert der Ansatz von Chris perfekt. Ich habe meinen Code hier hinzugefügt, um eine funktionierende Demo davon zu haben.

Ich habe es mit Bootstrap 3.3.1 getestet und ich habe es nicht mit einer älteren Version getestet. Aber es funktioniert definitiv nicht mit 2.x, da das shown.bs.popoverEvent mit 3.x eingeführt wurde.

$(function() {
  
  var createPopover = function (item, title) {
                       
        var $pop = $(item);
        
        $pop.popover({
            placement: 'right',
            title: ( title || '&nbsp;' ) + ' <a class="close" href="#">&times;</a>',
            trigger: 'click',
            html: true,
            content: function () {
                return $('#popup-content').html();
            }
        }).on('shown.bs.popover', function(e) {
            //console.log('shown triggered');
            // 'aria-describedby' is the id of the current popover
            var current_popover = '#' + $(e.target).attr('aria-describedby');
            var $cur_pop = $(current_popover);
          
            $cur_pop.find('.close').click(function(){
                //console.log('close triggered');
                $pop.popover('hide');
            });
          
            $cur_pop.find('.OK').click(function(){
                //console.log('OK triggered');
                $pop.popover('hide');
            });
        });

        return $pop;
    };

  // create popover
  createPopover('#showPopover', 'Demo popover!');

  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button class="btn btn-primary edit" data-html="true" data-toggle="popover" id="showPopover">Show</button>

<div id="popup-content" class="hide">
    <p>Simple popover with a close button.</p>
    <button class="btn btn-primary OK">OK</button>
</div>

Der Trick besteht darin, den aktuellen Popover mit .data ('bs.popover') abzurufen. Tip () :

$('#my_trigger').popover().on('shown.bs.popover', function() {
    // Define elements
    var current_trigger=$(this);
    var current_popover=current_trigger.data('bs.popover').tip();

    // Activate close button
    current_popover.find('button.close').click(function() {
        current_trigger.popover('hide');
    });
});

Ich wollte nur die Antwort aktualisieren. Laut Swashata Ghosh ist die folgende Methode für Moi einfacher:

HTML:

<button type="button" class="btn btn-primary example">Example</button>

JS:

$('.example').popover({
   title: function() {
      return 'Popup title' +
             '<button class="close">&times</button>';
   },
   content: 'Popup content',
   trigger: 'hover',
   html: true
});

$('.popover button.close').click(function() {
   $(this).popover('toggle');
});

Dies funktioniert mit mehreren Popovers, und ich habe auch ein wenig mehr zusätzliches JS hinzugefügt, um die Z-Index-Probleme zu lösen, die bei überlappenden Popovers auftreten:

http://jsfiddle.net/erik1337/fvE22/

JavaScript:

var $elements = $('.my-popover');
$elements.each(function () {
    var $element = $(this);

    $element.popover({
        html: true,
        placement: 'top',
        container: $('body'), // This is just so the btn-group doesn't get messed up... also makes sorting the z-index issue easier
        content: $('#content').html()
    });

    $element.on('shown.bs.popover', function (e) {
        var popover = $element.data('bs.popover');
        if (typeof popover !== "undefined") {
            var $tip = popover.tip();
            zindex = $tip.css('z-index');

            $tip.find('.close').bind('click', function () {
                popover.hide();
            });

            $tip.mouseover(function (e) {
                $tip.css('z-index', function () {
                    return zindex + 1;
                });
            })
                .mouseout(function () {
                $tip.css('z-index', function () {
                    return zindex;
                });
            });
        }
    });
});

HTML:

<div class="container-fluid">
    <div class="well popover-demo col-md-12">
        <div class="page-header">
             <h3 class="page-title">Bootstrap 3.1.1 Popovers with a close button</h3>

        </div>
        <div class="btn-group">
            <button type="button" data-title="Popover One" class="btn btn-primary my-popover">Click me!</button>
            <button type="button" data-title="Popover Two" class="btn btn-primary my-popover">Click me!</button>
            <button type="button" data-title="Popover Three (and the last one gets a really long title!)" class="btn btn-primary my-popover">Click me!</button>
        </div>
    </div>
</div>
<div id="content" class="hidden">
    <button type="button" class="close">&times;</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS:

/* Make the well behave for the demo */
 .popover-demo {
    margin-top: 5em
}
/* Popover styles */
 .popover .close {
    position:absolute;
    top: 8px;
    right: 10px;
}
.popover-title {
    padding-right: 30px;
}

Ich habe Probleme mit diesem und dies ist der einfachste Weg, es zu tun, 3 Zeilen von js:

1. Fügen Sie im Titel des Popovers ein Kreuz hinzu
2. Verwenden Sie das js-Snippet, um das Popover anzuzeigen und durch Klicken auf die Kopfzeile zu schließen
3. Verwenden Sie ein bisschen CSS, um es schön zu machen

$(document).ready(function() {
  // This is to overwrite the boostrap default and show it allways
  $('#myPopUp').popover('show');
  // This is to destroy the popover when you click the title
  $('.popover-title').click(function(){
    $('#myPopUp').popover('destroy');
  });
});

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";

/* Just to align my example */
.btn {
  margin: 90px auto;
  margin-left: 90px;
}

/* Styles for header */
.popover-title {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-block;
  float: right;
  text-align: right; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<button id="myPopUp" class="btn btn-success" data-toggle="popover" data-placement="top" data-title="×" data-content="lorem ipsum content">My div or button or something with popover</button>  
 

Versuche dies:

$(function(){
  $("#example")
      .popover({
      title : 'tile',
      content : 'test'
    })
    .on('shown', function(e){
      var popover =  $(this).data('popover'),
        $tip = popover.tip();

      var close = $('<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>')
        .click(function(){
          popover.hide();
        });
      $('.popover-title', $tip).append(close);
    });
});

Anstatt die Schaltfläche als Markup-Zeichenfolge hinzuzufügen, ist es viel einfacher, wenn Sie eine mit jQuery umschlossene Schaltfläche haben, da Sie dann viel sauberer binden können. Dies fehlt zwar leider im Bootstrap-Code, aber diese Problemumgehung funktioniert für mich und kann auf Wunsch auf alle Popover angewendet werden.

Hier ist eine "Cheat" -Lösung:

Befolgen Sie die üblichen Anweisungen für ein abweisbares Popup.

Dann schlagen Sie mit CSS ein 'X' in das Feld.

CSS:

.popover-header::after {
    content: "X";
    position: absolute;
    top: 1ex;
    right: 1ex;
}

JQUERY:

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

HTML:

<a data-toggle="popover" data-trigger="focus" tabindex="0"  title="Native Hawaiian or Other Pacific Islander" data-content="A person having origins in any of the original peoples of Hawaii, Guam, Samoa, or other Pacific Islands.">?</a>

Technisch gesehen ist es daher abweisbar, wenn jemand auf etwas anderes als das "X" klickt, aber das ist zumindest in meinem Szenario kein Problem.

$popover = $el.popover({
  html: true
  placement: 'left'
  content: 'Do you want to a <b>review</b>? <a href="#" onclick="">Yes</a> <a href="#">No</a>'
  trigger: 'manual'
  container: $container // to contain the popup code
});

$popover.on('shown', function() {
  $container.find('.popover-content a').click( function() {
    $popover.popover('destroy')
  });
});

$popover.popover('show')'

$(function(){ 
  $("#example").popover({
    placement: 'bottom',
    html: 'true',
    title : '<span class="text-info"><strong>title!!</strong></span> <button type="button" id="close" class="close">&times;</button></span>',
    content : 'test'
  })

  $(document).on('click', '#close', function (evente) {
    $("#example").popover('hide');
  });
  $("#close").click(function(event) {
    $("#example").popover('hide');
  });
});

<button type="button" id="example" class="btn btn-primary" >click</button>

    $('.tree span').each(function () {
        var $popOverThis = $(this);
        $popOverThis.popover({
            trigger: 'click',
            container: 'body',
            placement: 'right',
            title: $popOverThis.html() + '<button type="button" id="close" class="close" ">&times;</button>',
            html: true,
            content: $popOverThis.parent().children("div.chmurka").eq(0).html()
        }).on('shown.bs.popover', function (e) {
            var $element = $(this);
            $("#close").click(function () {
                $element.trigger("click");
            });
        });
    });

Wenn Sie auf Element klicken und Ihr Popup anzeigen, können Sie als Nächstes das Ereignis show.bs.popover auslösen. In diesem Element erhalten Sie ein Element, in dessen Auslöser Sie klicken, um Ihr Popover zu schließen.

FWIW, hier ist die generische Lösung, die ich verwende. Ich verwende Bootstrap 3, aber ich denke, der allgemeine Ansatz sollte auch mit Bootstrap 2 funktionieren.

Die Lösung aktiviert Popovers und fügt eine Schaltfläche zum Schließen für alle Popovers hinzu, die durch das Tag 'rel = "popover"' unter Verwendung eines generischen JS-Codeblocks gekennzeichnet sind. Abgesehen von der (Standard-) Anforderung, dass ein rel = "popover" -Tag vorhanden sein muss, können Sie eine beliebige Anzahl von Popovers auf der Seite platzieren, und Sie müssen ihre IDs nicht kennen - tatsächlich benötigen sie keine IDs überhaupt. Sie müssen das HTML-Tag-Format 'Datentitel' verwenden, um das title-Attribut Ihrer Popovers festzulegen, und data-html auf "true" setzen.

Der Trick, den ich für notwendig hielt, bestand darin, eine indizierte Karte mit Verweisen auf die Popover-Objekte ("po_map") zu erstellen. Dann kann ich über HTML einen 'onclick'-Handler hinzufügen, der über den von JQuery dafür angegebenen Index auf das Popover-Objekt verweist ("p_list [' + index + ']. Popover (\' toggle \ ')"). Auf diese Weise muss ich mich nicht um die IDs der Popover-Objekte kümmern, da ich eine Karte mit Verweisen auf die Objekte selbst mit einem von JQuery bereitgestellten eindeutigen Index habe.

Hier ist das Javascript:

var po_map = new Object();
function enablePopovers() {
  $("[rel='popover']").each(function(index) {
    var po=$(this);
    po_map[index]=po;
    po.attr("data-title",po.attr("data-title")+
    '<button id="popovercloseid" title="close" type="button" class="close" onclick="po_map['+index+'].popover(\'toggle\')">&times;</button>');
    po.popover({});
  });
}
$(document).ready(function() { enablePopovers() });

Mit dieser Lösung kann ich auf einfache Weise alle Popover auf meiner Website schließen.

Ich fand den folgenden Code sehr nützlich (entnommen aus https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/ ):

$('[data-toggle="popover"]').popover({
  title: function(){
    return $(this).data('title')+'<span class="close" style="margin-top: -5px">&times;</span>';
  }
}).on('shown.bs.popover', function(e){
  var popover = $(this);
  $(this).parent().find('div.popover .close').on('click', function(e){
    popover.popover('hide');
  });
});

Sticky on Hover, HTML:

<a href="javascript:;" data-toggle="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Lorem Ipsum">...</a>

Javascript:

$('[data-toggle=popover]').hover(function(e) {
  if( !$(".popover").is(':visible') ) {
      var el = this;
      $(el).popover('show');
      $(".popover > h3").append('<span class="close icon icon-remove"></span>')
                        .find('.close').on('click', function(e) {
                            e.preventDefault();
                            $(el).popover('hide');
                        }
      );
  }
});

Fügen Sie dies in Ihren Titel-Popover-Konstruktor ein ...

'<button class="btn btn-danger btn-xs pull-right"
onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon
glyphicon-remove"></span></button>some text'

... um einen kleinen roten 'x'-Knopf in der oberen rechten Ecke zu erhalten

//$('[data-toggle=popover]').popover({title:that string here})

Für alle, die noch ein wenig verwirrt sind:

So funktioniert es, wenn Sie das Popover umschalten, nachdem Sie es angezeigt haben. Wählen Sie dieselbe Schaltfläche aus, mit der Sie es ausgelöst haben, und rufen Sie .popover ('umschalten') auf.

In diesem Fall lautet der Code zum Schließen des Popovers wie folgt:

$ ('# example'). popover ('toggle');

Als sehr einfache Lösung habe ich Folgendes getan:

1) Fügen Sie das folgende CSS hinzu:

.sub_step_info .popover::after {
    content:url('/images/cross.png');
    position:absolute;
    display:inline-block;
    top:15px;
    right:5px;
    width:15px;
    text-align:center;
    cursor:pointer;
}

2) data-trigger="manual"Stellen Sie das Popover-Triggerelement ein

3) Dann basierend auf https://github.com/twbs/bootstrap/issues/16802 :

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

Dies basiert auf der Grundlage, dass eine beliebige Stelle im Popover anklickbar ist. Wenn Sie sich jedoch auf das Kreuz konzentrieren, fördern Sie das gewünschte Verhalten.

Für mich ist dies die einfachste Lösung, um einem Popover eine Schaltfläche zum Schließen hinzuzufügen.

HTML:

    <button type="button" id="popover" class="btn btn-primary" data-toggle="popover" title="POpover" data-html="true">
                    Show popover
    </button>

    <div id="popover-content" style="display:none"> 
       <!--Your content-->
       <button type="submit" class="btn btn-outline-primary" id="create_btn">Create</button>
       <button type="button" class="btn btn-outline-primary" id="close_popover">Cancel</button>  
    </div>

Javascript:

    document.addEventListener("click",function(e){
        // Close the popover 
        if (e.target.id == "close_popover"){
                $("[data-toggle=popover]").popover('hide');
            }
    });

Ich hatte das Problem, dass der Tooltip einige funky Sachen machte, als auf die Schaltfläche zum Schließen geklickt wurde. Um dies zu umgehen, habe ich eine spananstelle einer Schaltfläche verwendet. Wenn auf die Schaltfläche zum Schließen geklickt wurde, musste ich nach dem Schließen zweimal auf den Tooltip klicken, um ihn wieder zu öffnen. Um dies zu umgehen, habe ich einfach die .click()unten gezeigte Methode verwendet .

<span tabindex='0' class='tooltip-close close'>×</span>

$('#myTooltip').tooltip({
    html: true,
    title: "Hello From Tooltip",
    trigger: 'click'
});    

$("body").on("click", ".tooltip-close", function (e) {
    else {
        $('.tooltip').remove();
        $('#postal-premium-tooltip').click();
    }
});

Dies ist eine funktionierende Lösung, die auf der obigen Antwort von @Chris basiert, jedoch so korrigiert wurde, dass Sie beim Klicken in Folgefolgen auf das Triggerelement nicht zweimal auf das Element klicken müssen.

Durch die .popover('hide)manuelle Verwendung wird der interne Status der Bootstraps durcheinander gebracht, wie in den Kommentaren angegeben.

var closePopover = function(eventShown) {
   // Set the reference to the calling element
   var $caller = $('#' + this.id);

   // Set the reference to the popover
   var $popover = $('#' + $(eventShown.target).attr('aria-describedby'));

       // Unbind any pre-existing event handlers to prevent duplicate clicks
       $popover.find('.popover-close').off('click');

       // Bind event handler to close button
       $popover.find('.popover-close').on('click', function(e) {

          // Trigger a click on the calling element, to maintain bootstrap's internal state
          $caller.trigger('click');
        });
 }

$('.popoverTriggerElement').popover({
   trigger: 'click'
})
.on('shown.bs.popover', closePopover)

Jetzt können Sie die Schaltfläche zum Schließen verwenden, ohne die Klickereignisse zu duplizieren und den internen Status der Bootstraps zu überprüfen, damit sie wie erwartet funktionieren.

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.popover-1.1.2.js"></script>

<script type="text/javascript">
$(function(){ 
$("#example").popover({
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span> <button     type="button" id="close" class="close">&times;</button></span>',
        content : 'test'
    })


$("#close").click(function(event) {

$("#example").popover('hide');
});
});
</script>

<button type="button" id="example" class="btn btn-primary" >click</button>