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

76

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?

Danglebz Highbreed
quelle

Antworten:

88

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'
    });
});  
davidkonrad
quelle
1
@Sebf, Bootstrap soll so leicht wie möglich sein, viele Probleme sollen auf der Implementierungsebene gelöst werden. Ja, einige "fehlende" Teile sind verwirrend ;-)
Davidkonrad
11
@ Jonschlinkert data-dismiss="popover"anstelle von onclickfunktioniert nicht. Dies ist ein gut dokumentiertes Problem.
Hengjie
1
Die Verwendung von Inline-HTML- und JavaScript-Ereignissen im Popover-Titel ist eine ziemlich schlechte Praxis. Es könnte funktionieren, aber es wird Ihnen später Kopfschmerzen bereiten.
Mario Fink
1
@Mario Fink (und Robert Kotcher) - stimme natürlich nicht zu. Aber so konnten Sie die gewünschte Funktionalität in Twitter Bootstrap 2.x implementieren, jetzt schlägt der beabsichtigte Weg fehl. Ich beantworte einfach die Frage.
Davidkonrad
2
Für mich funktionierte das obige Beispiel nur, indem die doppelten Anführungszeichen (& quot;) durch einfache Anführungszeichen (& # 39;) ersetzt wurden
Ruut
32

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');
    });
});
Chris
quelle
Kleine Verbesserung:popup.find('button.cancel').on('click',function(e) {...}
Bart
7
Wenn ich auf den Link Abbrechen klicke, wird das Popover geschlossen. Ich muss jedoch zweimal auf den Popover-Trigger-Link klicken, da der Popover beim ersten Klick nicht geöffnet wird.
Nizam Kazi
Es gibt eine vordefinierte Klasse .closemit Hover-Effekt, sodass das Einfügen der Schaltfläche zum Schließen in Titel oder Inhalt so einfach wie möglich ist <span class=close>&times;</span>.
lubosdz
@NizamKazi Verwenden Sie meine Lösung unten, um das zu lösen: stackoverflow.com/a/58923567/5376813
TetraDev
27

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').

youen
quelle
2
Aus irgendeinem Grund .popover('toggle');tut die Verwendung von Bootstrap 3 nie etwas für mich, wo .popover('hide');es funktioniert. Davon abgesehen ist diese Lösung mein Favorit. Vielen Dank!
Hvaughan3
Würde das nicht das Klickereignis bei jedem Popover-Show-Ereignis binden, was zu mehreren Bindungen führen würde?
Pdu
@pduersteler das ist alter Code, aber er wird in der Produktion verwendet, also bin ich mir ziemlich sicher, dass er funktioniert. Ich denke, Bootstrap erstellt jedes Mal, wenn auf die Schaltfläche geklickt wird, ein neues Popover und damit eine neue Schaltfläche zum Schließen. Wenn es mehrere Ereignisse auf der Schaltfläche zum Schließen gäbe, würde es mehrmals umschalten, und ich hätte den Fehler (hoffentlich) bemerkt. Lassen Sie mich wissen, ob Sie ein Problem bestätigen können. Beim zweiten Gedanken, vielleicht hatte ich deshalb ein Problem damit popover('hide'), das Popover nicht zu zerstören, sondern es nur zu verbergen?
Youen
Dies sollte $(button.data('bs.popover').tip).find('[data-dismiss="popover"]')in modernen Bootstrap sein (> = 4?)
Mike Campbell
18

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'
});
user2957865
quelle
Wow, schöne und einfache Lösung. Funktioniert bei mir.
Adrian Enriquez
1
Mit Bootstrap 4.3 musste ich sanitize: falsezu den Popover-Optionen hinzufügen
Richard
15

Geben Sie hier die Bildbeschreibung ein

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

      });
Chunguiw
quelle
Hey, danke für deine Antwort! Möchten Sie das &times;Symbol innerhalb des h3.popover-titleObjekts vertikal zentrieren?
Renato Gama
Hat gut funktioniert, aber ich hatte das gleiche Problem mit der vertikalen Ausrichtung. Ich fügte meine eigene Klasse zum Schließen-Button hinzu line-height: 0.7 !important;und sah gut aus
dading84
Wenn ich auf den Link Abbrechen klicke, wird das Popover geschlossen. Aber ich muss zweimal auf Popover-Trigger-Link klicken, da es Popover nicht beim ersten Klick
öffnet
9

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>

Ein Wolf
quelle
1
Ich denke es muss sein$cur_pop.popover('hide');
Bernhard Döbler
5

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

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

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;
}
erik1337
quelle
4

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

Geben Sie hier die Bildbeschreibung ein

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

Juandiegoles
quelle
Warum wird die Schaltfläche nicht mit der Registerkarte navigiert?
Chandresh Mishra
3

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.

Wütender Dan
quelle
Hat für mich am besten funktioniert, ich muss nur die BS-Namen aktualisieren: 'gezeigt' -> 'gezeigt.bs.popover' Daten ('popover') -> Daten ('bs.popover')
Ashot
2

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.

Michael Akerman
quelle
1
$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')'
Desmond Lua
quelle
1
$(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>
mii
quelle
1
    $('.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.

matiii
quelle
1

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.

Chris Tennant
quelle
1

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

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

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

quelle
0

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

devoragz
quelle
0

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.

Ukuser32
quelle
0

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');
            }
    });
Jacob Cortes Amador
quelle
0

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();
    }
});
Colin
quelle
0

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.

TetraDev
quelle
-2
<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>
Arun
quelle
2
Sry, aber das wird nie funktionieren. #closeexistiert nur, wenn das Popover aktiv ist, clickist nie gebunden. Versuchen Sie alert($("#close").length);(es warnt 0)
Davidkonrad