Wie schließe ich einen bootstrap-popover mit einem Knopf im popover?

Ich habe eine jsFiddle wo ich twitter bootstrap popover-Funktion auf ein Symbol.

<div style="margin-top:200px">
    <ul>
        <li class="in-row">
            <a href="#" id="meddelanden" data-title="Meddelanden" data-toggle="clickover" 
            data-placement="right"><i class="icon-globe"></i></a>
        </li>
    </ul>
</div>

jquery:

var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<button id="close-popover" class="btn btn-small btn-primary pull-right">Close please!</button>';

$('#meddelanden').popover({animation:true, content:elem, html:true});

Scheine ich nicht zu können, schließen Sie das popover mit dem button drin. Ich habe versucht, einen jquery-Klick-Funktion auf die id "close-popover" aber in Anbetracht passiert. (Ich habe nicht mein Versuch, ihn zu schließen im inneren der jsfiddle)

Irgendwelche Vorschläge, wie können Sie schließen Sie ein popover mit einem Knopf im popover?

Grüße,
Bill

InformationsquelleAutor XT_Nova | 2013-04-25

8

Versuchen Sie dies:- http://jsfiddle.net/6hkkk/
```
var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<button id="close-popover" data-toggle="clickover" class="btn btn-small btn-primary pull-right" onclick="$(&quot;#meddelanden&quot;).popover(&quot;hide&quot;);">Close please!</button>';



$('#meddelanden').popover({animation:true, content:elem, html:true});
```
- Danke!!! Dieser funktioniert wie ein Charme, während keiner der anderen Vorschläge haben. Ich bin sehr dankbar für all Ihre Hilfe! /Bill
- Kein problem, ich bin froh, dass es ein wenig helfen, um Ihr Problem zu lösen... 🙂
- Der bessere Ansatz wäre es, die Klasse hinzufügen "schließen", um die Schaltfläche und fügen Sie diese Prozedur für enge action: $(document).on("click", ".popover .in der Nähe" , function() { $(this).Eltern(".popover").popover('hide'); });
- Dieser sieht eine perfekte Lösung, aber Frage mich, was passiert, wenn ich den code in der Richtlinie, und es kann allgemein verwendet. Da ich eine ähnliche Anforderung in Ang und ich platziert den code in der Richtlinie der popover funktioniert gut, aber nur das close-Ereignis wird scheitern, jeden link/Vorschlag wäre eine große Hilfe.
InformationsquelleAutor PSL

Nur ein wenig onclick:

<button onclick="$('#meddelanden').popover('hide');" class="btn btn-small btn-primary pull-right">Close please!</button>

Oder wie wäre es mit einer Funktion:

<button onclick="close_please();" class="btn btn-small btn-primary pull-right">Close please!</button>

mit...

function close_please() {
    $('#meddelanden').popover('hide');
}

Oder, wie etwa die Bindung an den Knopf, nachdem es erstellt wurde.

$('#meddelanden').popover({animation:true, content:elem, html:true});
$('#close-popover').bind('click', function(){
    $('#meddelanden').popover('hide');
});

InformationsquelleAutor jon__o

2

Vorherigen Beispielen haben zwei wesentliche Nachteile:
1. Das 'schließen' - Schaltfläche muss in irgendeiner Weise bewusst zu sein, die ID des referenzierten element.
2. Die Notwendigkeit der Zugabe auf der 'gezeigt.bs.popover' Ereignis, ein 'Klick' - listener auf die Schaltfläche schließen; das ist auch keine gute Lösung, da Sie, würden Sie dann das hinzufügen von solchen listener jedes mal, wenn die 'popover' angezeigt.
Unten ist eine Lösung, die keine solchen Nachteile.

Durch die Standard -, die 'popover' - element eingefügt wird unmittelbar nach dem referenzierten element in das DOM (beachten Sie die referenzierten element und das popover werden sofort sichtbare Elemente). Also, wenn der "schließen" - Schaltfläche geklickt wird, Sie können einfach suchen Sie für Ihre nächsten 'div.popover' Eltern, und suchen Sie dann für die unmittelbar vorhergehende nebengeordnete element dieses parent.

Fügen Sie einfach den folgenden code in das 'onclick' - handler des " schließen-Taste:
```
$(this).closest('div.popover').prev().popover('hide');
```
Beispiel:
```
var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').prev().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'
});
```
- Soweit ich weiß, das wird nicht funktionieren, wenn Sie Daten-container, so dass der popover ist nicht neben dem Auslöser (in meinem Fall habe data-container="Körper", um es anzuzeigen oberhalb der trigger-container). Gibt es einen Weg, um tatsächlich abrufen der popover in allen Fällen?
InformationsquelleAutor user2957865
0

versuchen Sie dies:
```
<input type="button" onclick="$(this).parent().hide();" value="close">
```
durch die übergabe $(this) Ihr Verweis auf die Taste und parent referenziert das element der button sitzt in
- Ich bearbeitet habe.. hatte die syntax falsch.. sollte diese Arbeit durch schließen des parent-Elements von der Taste
- Leider hat das nicht den trick tun. Es schließt nicht alle popover (nur Eltern, nicht der header und so). Weder können Sie das popover zurück, klicken auf das Symbol wieder.
- besch ich nicht sehen, Ihre jfiddle link, aber ja.. $('#meddelanden').popover('hide'); ist der Weg zu gehen.. Sie sollten akzeptieren, jon__o wie die Antwort
InformationsquelleAutor Patrick McWilliams

Alternative ohne Aufruf der Funktion klicken Sie auf:

Javascript

var $popoverParent = $('.popover-parent').popover();

//allow to close when close button clicked
//register listener before popover shown
$popoverParent.on('shown.bs.popover', function()
{
    //get the actual shown popover
    var $popover = $(this).data('bs.popover').tip();

    //find the close button
    var $closeButton = $popover.find('.close-btn');

    $closeButton.click(function(){
        $popoverParent.popover('hide');
    });
});

//show your popover
$popoverParent.popover('show');

InformationsquelleAutor Sabrina Leggett

-1

Setzen Sie diese in Ihrem Titel popover-Konstruktor...
```
'<button class="btn btn-danger btn-xs pull-right"
onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon
glyphicon-remove"></span></button>some text'
```
...eine kleine rote " x " - button in der oberen rechten Ecke
```
//$('[data-toggle=popover]').popover({title:that string here})
```
gebe ich die gleiche Antwort https://stackoverflow.com/a/23556160/3603692
Ich hoffe, dass ist erlaubt.
- Dies bedeutet ausblenden der popover, aber nicht richtig setzen Sie den neuen status, so dass einem erneuten Klick auf die trigger-Schaltfläche wird nicht angezeigt, das popover (ich denke, es wird wieder verstecken statt), müssen Sie zweimal klicken, um die popover zurück, das ist nicht wirklich akzeptabel.
InformationsquelleAutor housecarl
-1

Ich habe viele popovers auf meiner Seite, und Sie alle haben die gleiche benutzerdefinierte Titelleiste, so haben Sie alle die gleiche Schaltfläche schließen. Daher kann ich nicht vorbei an einer ID mit einem onclick-handler. Stattdessen entschied ich mich, um die Suche für die open-popover (es kann nur eine gleichzeitig geöffnet sein) und schließen Sie es dann.
```
function closeMe() {
  $( document ).find('.popoverIsOpen').popover( 'hide' );
}
```
InformationsquelleAutor scott

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.