J’essaie d’afficher le code HTML dans un pop-up bootstrap, mais cela ne fonctionne pas. J’ai trouvé des réponses ici mais cela ne fonctionnera pas pour moi. S’il vous plaît laissez-moi savoir si je fais quelque chose de mal.
$(function(){ $('[rel=popover]').popover({ html : true, content: function() { return $('#popover_content_wrapper').html(); } }); }); popover This is your div content
Vous ne pouvez pas utiliser
c'est pourquoi cela ne fonctionnait pas, changez-le et tout va bien.
Voici JSFiddle qui montre comment créer un pop-up bootstrap.
Les parties pertinentes du code sont ci-dessous:
HTML:
Example popover
JavaScript:
$(function(){ // Enables popover $("[data-toggle=popover]").popover(); });
Et bien sûr, vous avez toujours besoin d'au moins $("[data-toggle=popover]").popover();
pour activer le popover. Mais à la place de data-toggle="popover"
vous pouvez également utiliser id="my-popover"
ou class="my-popover"
. Rappelez-vous juste de les activer en utilisant par exemple: $("#my-popover").popover();
dans ces cas.
Voici le lien vers la fiche complète: Bootstrap Popover
Prime:
Si pour une raison quelconque vous n'aimez pas (ou ne pouvez pas lire) le contenu d'une fenêtre contextuelle à partir des balises data-toggle
et title
. Vous pouvez également utiliser des divs cachés et un peu plus de JavaScript. Voici un exemple à ce sujet.
À votre santé.
vous pouvez utiliser l’atsortingbut data-html="true"
:
popover
Vous devez créer une instance de popover dont l’option html est activée (placez-la dans votre fichier javascript après le code JS popover):
$('.popover-with-html').popover({ html : true });
Une autre façon de spécifier le contenu popover de manière réutilisable consiste à créer un nouvel atsortingbut de data-popover-content
tel que data-popover-content
et à l’utiliser comme ceci:
HTML:
Popover Example This is the heading for #1 This is the body for #1
JS:
$(function(){ $("[data-toggle=popover]").popover({ html : true, content: function() { var content = $(this).attr("data-popover-content"); return $(content).children(".popover-body").html(); }, title: function() { var title = $(this).attr("data-popover-content"); return $(title).children(".popover-heading").html(); } }); });
Cela peut être utile lorsque vous avez beaucoup de HTML à placer dans vos popovers.
Voici un exemple de violon: http://jsfiddle.net/z824fn6b/
Ceci est une légère modification de l’excellente réponse de Jack .
Ce qui suit garantit que les popovers simples, sans contenu HTML, ne sont pas affectés.
JavaScript:
$(function(){ $('[data-toggle=popover]:not([data-popover-content])').popover(); $('[data-toggle=popover][data-popover-content]').popover({ html : true, content: function() { var content = $(this).attr("data-popover-content"); return $(content).children(".popover-body").html(); }, title: function() { var title = $(this).attr("data-popover-content"); return $(title).children(".popover-heading").html(); } }); });
Je déteste vraiment mettre du HTML à l’intérieur de l’atsortingbut, voici ma solution, claire et simple (remplacez-la par ce que vous voulez):
Some title
Some text
puis
var help = $('.popover-dismiss'); help.attr('data-content', help.html()).text(' ? ').popover({sortinggger: 'hover', html: true});
Ceci est une ancienne question, mais c’est une autre manière, en utilisant jQuery pour réutiliser le popover et pour continuer à utiliser les atsortingbuts de données bootstrap originaux pour le rendre plus sémantique:
Show it!
$('[rel="popover"]').popover({ container: 'body', html: true, content: function () { var clone = $($(this).data('popover-content')).clone(true).removeClass('hide'); return clone; } });
Violon avec exemple complet: http://jsfiddle.net/tomsarduy/262w45L5/
Vous pouvez changer le ‘template / popover / popover.html’ dans le fichier ‘ui-bootstrap-tpls-0.11.0.js’ Write: “bind-html-unsafe” au lieu de “ng-bind”
Il montrera tout popover avec HTML. * son html dangereux. Utilisez uniquement si vous faites confiance au HTML.