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
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="$("#meddelanden").popover("hide");">Close please!</button>';
$('#meddelanden').popover({animation:true, content:elem, html:true});
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');
});
Les exemples précédents présentent deux inconvénients principaux:
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">×</button>';
$loginForm.popover({
placement: 'auto left',
trigger: 'manual',
html: true,
title: 'Alert' + genericCloseBtnHtml,
content: 'invalid email and/or password'
});
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');
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é.
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