Comment insérer un bouton de fermeture dans Popover pour bootstrap
JS:
$(function(){
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">×</button>',
content : 'test'
})
$('html').click(function() {
$('#close').popover('hide');
});
});
HTML:
<button type="button" id="example" class="btn btn-primary" ></button>
je écris votre code ne montre pas votre popup.
quelqu'un at-il rencontré ce problème?
Vous devez adapter le balisage correctement
<button type="button" id="example" class="btn btn-primary">example</button>
Ensuite, vous pouvez attacher le gestionnaire rapproché à l'intérieur de l'élément lui-même.
$(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="$("#example").popover("hide");">×</button>',
content : 'test'
});
});
Je devais trouver quelque chose qui fonctionnerait pour plusieurs popovers et dans Bootstrap 3.
Voici ce que j'ai fait:
J'avais plusieurs éléments pour lesquels je voulais faire un travail popover, alors je ne voulais pas utiliser d'identifiant.
Le balisage pourrait être:
<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>
Le contenu des boutons de sauvegarde et de fermeture à l'intérieur du popover:
var contentHtml = [
'<div>',
'<button class="btn btn-link cancel">Cancel</button>',
'<button class="btn btn-primary save">Save</button>',
'</div>'].join('\n');
et le javascript pour les 3 boutons:
Cette méthode fonctionne lorsque le conteneur est la valeur par défaut non attachée au corps.
$('.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');
});
});
Lorsque le conteneur est attaché à 'body'
Ensuite, utilisez l'aria décrit ci-dessus pour trouver le menu contextuel et le masquer.
$('.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');
});
});
J'ai trouvé que d'autres réponses n'étaient pas assez génériques ou trop compliquées. Voici un exemple simple qui devrait toujours fonctionner (pour 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');
});
});
});
Ensuite, ajoutez simplement l'attribut data-dismiss="popover" dans votre bouton de fermeture. Veillez également à ne pas utiliser popover('hide') ailleurs dans votre code, car il masque la fenêtre contextuelle, mais ne définit pas correctement son état interne dans le code d'amorçage, ce qui entraînera des problèmes lors de votre prochaine utilisation de popover('toggle').
Ce qui suit est ce que je viens d’utiliser dans mon projet. Et j'espère que cela pourra vous aider.
<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">×</button>');
$(this).popover();
});
$(document).click(function(e) {
if(e.target.id=="popovercloseid" )
{
$('#manualinputlabel').popover('hide');
}
});
Les exemples précédents présentent deux inconvénients principaux:
- Le bouton 'fermer' doit en quelque sorte connaître l'identifiant de l'élément référencé.
- 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').popover('hide');
Exemple:
var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').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'
});
J'ai vérifié de nombreux exemples de code mentionnés et pour moi, l'approche de Chris fonctionne parfaitement. J'ai ajouté mon code ici pour en avoir une démonstration.
Je l'ai testé avec Bootstrap 3.3.1 et je ne l'ai pas testé avec une version plus ancienne. Mais cela ne fonctionne certainement pas avec 2.x car l'événement shown.bs.popover a été introduit avec 3.x.
$(function() {
var createPopover = function (item, title) {
var $pop = $(item);
$pop.popover({
placement: 'right',
title: ( title || ' ' ) + ' <a class="close" href="#">×</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>L'astuce consiste à obtenir le Popover actuel avec .data ('bs.popover'). 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');
});
});
Cela fonctionne avec plusieurs popovers et j'ai également ajouté un petit gros JS supplémentaire pour gérer les problèmes d'index z qui se produisent avec des popovers superposés:
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">×</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;
}
J'ai du mal avec celui-ci et c'est le moyen le plus simple de le faire, 3 lignes de js
- Ajouter une croix dans le titre de la popover
- utilisez l'extrait de code js pour afficher le popover et le fermer en cliquant sur l'en-tête
- Utilisez un peu de CSS pour le rendre agréable
$(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>
Essaye ça:
$(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">×</span></button>')
.click(function(){
popover.hide();
});
$('.popover-title', $tip).append(close);
});
});
Plutôt que d'ajouter le bouton sous la forme d'une chaîne de balisage, il est beaucoup plus facile de disposer d'un bouton enveloppé jQuery, car vous pourrez ainsi lier beaucoup plus efficacement. C’est effectivement tristement absent du code Bootstrap, mais cette solution de contournement fonctionne pour moi et pourrait en fait être étendue pour s’appliquer à tous les popovers si vous le souhaitez.
Je voulais juste mettre à jour la réponse. Selon Swashata Ghosh, voici une méthode plus simple qui a fonctionné pour moi:
HTML:
<button type="button" class="btn btn-primary example">Example</button>
JS:
$('.example').popover({
title: function() {
return 'Popup title' +
'<button class="close">×</button>';
},
content: 'Popup content',
trigger: 'hover',
html: true
});
$('.popover button.close').click(function() {
$(this).popover('toggle');
});
FWIW, voici la solution générique que j'utilise. J'utilise Bootstrap 3, mais je pense que l'approche générale devrait également fonctionner avec Bootstrap 2.
La solution active les popovers et ajoute un bouton "Fermer" pour tous les popovers identifiés par la balise "rel =" popover "'à l'aide d'un bloc générique de code JS. Outre l'exigence (standard) selon laquelle il doit exister une balise rel = "popover", vous pouvez placer un nombre arbitraire de popovers sur la page et vous n'avez pas besoin de connaître leurs identifiants. En fait, ils n'ont pas besoin d'identifiants. du tout. Vous devez utiliser le format de balise HTML "data-title" pour définir l'attribut title de vos popovers et définir data-html sur "true".
L'astuce que j'ai trouvée nécessaire était de construire une carte indexée de références aux objets popover ("po_map"). Ensuite, je peux ajouter un gestionnaire "onclick" via HTML qui fait référence à l'objet popover via l'index que JQuery me fournit ("p_list ['+ index +']. Popover (\ 'toggle \')"). De cette façon, je n'ai pas besoin de m'inquiéter des identifiants des objets popover, car j'ai une carte des références aux objets eux-mêmes avec un index unique fourni par JQuery.
Voici le 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\')">×</button>');
po.popover({});
});
}
$(document).ready(function() { enablePopovers() });
cette solution m'a permis de mettre facilement un bouton de fermeture sur toutes les popovers de mon site.
$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">×</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" ">×</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");
});
});
});
Lorsque vous cliquez sur element et que vous affichez votre popup, vous pouvez ensuite déclencher l’événement shown shown.bs.popover, où vous obtenez element dans lequel le déclencheur clique pour fermer votre popover.
Voici une solution "triche":
Suivez les instructions habituelles pour une fenêtre contextuelle licenciable.
Puis claquez un 'X' dans la case avec CSS.
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>
Techniquement parlant, il est licite que quelqu'un clique sur autre chose que le "X" mais ce n'est pas un problème dans mon scénario du moins.
J'ai trouvé le code ci-dessous très utile (extrait de 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">×</span>';
}
}).on('shown.bs.popover', function(e){
var popover = $(this);
$(this).parent().find('div.popover .close').on('click', function(e){
popover.popover('hide');
});
});
Collant en vol stationnaire, 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');
}
);
}
});
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})
Comme solution très simple à ceci, j'ai fait ce qui suit:
1) Ajoutez le CSS suivant:
.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) Définissez data-trigger="manual" sur l'élément déclencheur popover
3) Ensuite, sur https://github.com/twbs/bootstrap/issues/16802 :
$('[data-trigger="manual"]').click(function() {
$(this).popover('toggle');
}).blur(function() {
$(this).popover('hide');
});
Ceci utilise la base selon laquelle n'importe où sur le popover est cliquable, mais en vous concentrant sur la croix, vous encouragez le comportement que vous recherchez.
Pour moi, c'est la solution la plus simple pour ajouter un bouton de fermeture dans un popover.
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');
}
});
Pour ceux qui sont encore un peu confus:
Voici comment cela fonctionne pour basculer le popover une fois que vous l'avez affiché, sélectionnez le même bouton que vous avez utilisé pour le déclencher et appelez .popover ('basculer') dessus.
Dans ce cas, pour fermer la popover, le code serait:
$ ('# exemple'). popover ('bascule');