web-dev-qa-db-fra.com

Comment puis-je fermer un bootstrap-popover avec un bouton à l'intérieur du popover?

J'ai fait un jsFiddle où j'utilise la fonction popover bootstrap de Twitter sur une icône.

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

Je ne semble pas être en mesure de fermer le popover avec le bouton à l'intérieur. J'ai essayé de faire une fonction de clic jQuery sur l'id "close-popover", mais notant se produit. (Je n'ai pas inclus ma tentative de le fermer à l'intérieur du jsfiddle)

Des suggestions sur la façon de fermer un popover avec un bouton dans le popover?

Cordialement, Bill

javascriptjqueryhtmlcsstwitter-bootstrap
9
XT_Nova

Essayez ceci: - 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});
8
PSL

Que diriez-vous d'un simple clic?

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

Ou que diriez-vous d'une fonction:

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

avec...

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

Ou que diriez-vous de la liaison au bouton après sa création.

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

Les exemples précédents présentent deux inconvénients principaux:

  1. Le bouton 'fermer' doit en quelque sorte connaître l'identifiant de l'élément référencé.
  2. La nécessité d'ajouter à l'événement 'shown.bs.popover', un écouteur 'cliquer' au bouton de fermeture; ce qui n’est pas non plus une bonne solution, vous ajouteriez alors un tel écouteur à chaque fois que le "popover" est affiché.

Voici une solution qui ne présente pas de tels inconvénients.

Par défaut, l'élément 'popover' est inséré immédiatement après l'élément référencé dans le DOM (notez ensuite que l'élément référencé et le popover sont des éléments frères similaires). Ainsi, lorsque vous cliquez sur le bouton 'Fermer', vous pouvez simplement rechercher son parent 'div.popover' le plus proche, puis rechercher l'élément frère immédiatement précédent de ce parent.

Ajoutez simplement le code suivant dans le gestionnaire 'onclick' du bouton 'Fermer:

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

Exemple: 

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

Alternative sans fonction d'appel au clic:

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');
0
Sabrina Leggett

Mettez ceci dans votre constructeur popover de titre ...

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

... pour obtenir un petit bouton 'x' rouge dans le coin supérieur droit

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

je donne la même réponse https://stackoverflow.com/a/23556160/3603692 J'espère que cela est autorisé.

0
housecarl

essaye ça:

<input type="button" onclick="$(this).parent().hide();" value="close">

en passant $ (this) votre référence au bouton et parent fait référence à l'élément dans lequel se trouve le bouton

0
Patrick McWilliams