Próbuję wyświetlić HTML w oknie popover bootstrap, ale jakoś nie działa. Znalazłem tutaj odpowiedzi, ale to nie działa dla mnie. Daj mi znać, jeśli coś robię źle.
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
popover
</li>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
html
twitter-bootstrap
popover
Adrian Mojica
źródło
źródło
Odpowiedzi:
Nie możesz używać,
<li href="#"
ponieważ należy do<a href="#"
tego, dlatego nie działał, zmień go i wszystko jest w porządku.Oto działający JSFiddle, który pokazuje, jak utworzyć popover bootstrap.
Odpowiednie części kodu znajdują się poniżej:
HTML:
JavaScript:
A tak przy okazji, zawsze potrzebujesz przynajmniej
$("[data-toggle=popover]").popover();
włączyć popover. Ale zamiastdata-toggle="popover"
ciebie możesz również użyćid="my-popover"
lubclass="my-popover"
. Pamiętaj tylko, aby włączyć je za pomocą np .:$("#my-popover").popover();
w takich przypadkach.Oto link do pełnej specyfikacji: Bootstrap Popover
Premia:
Jeśli z jakiegoś powodu nie lubisz lub nie możesz odczytać zawartości wyskakującego okienka z tagów
data-toggle
ititle
. Możesz także użyć np. Ukrytych div i nieco więcej JavaScript. Oto przykład na ten temat.źródło
możesz użyć atrybutu
data-html="true"
:źródło
Innym sposobem określenia zawartości popover w sposób wielokrotnego użytku jest utworzenie nowego atrybutu danych, takiego jak
data-popover-content
i użycie go w następujący sposób:HTML:
JS:
Może to być przydatne, gdy masz dużo html do umieszczenia w swoich popovers.
Oto przykładowe skrzypce: http://jsfiddle.net/z824fn6b/
źródło
Musisz utworzyć instancję popover z włączoną opcją html (umieść to w pliku javascript po kodzie popover JS):
$('.popover-with-html').popover({ html : true });
źródło
Użyłem wyskakującego okienka na liście, podam przykład za pośrednictwem HTML
źródło
Musisz tylko wstawić
data-html="true"
link popover. Będzie działać.źródło
To niewielka modyfikacja doskonałej odpowiedzi Jacka .
Poniższe informacje gwarantują, że proste okienka pop bez zawartości HTML pozostaną niezmienione.
JavaScript:
źródło
Naprawdę nie lubię umieszczać długiego HTML wewnątrz atrybutu, oto moje rozwiązanie, jasne i proste (zamień? Na cokolwiek chcesz):
następnie
źródło
To stare pytanie, ale jest to inny sposób, używając jQuery do ponownego użycia programu popover i do dalszego używania oryginalnych atrybutów danych bootstrap, aby uczynić go bardziej semantycznym:
Połączenie
Treści niestandardowe do wyświetlenia
JavaScript
Fiddle z kompletnym przykładem: http://jsfiddle.net/tomsarduy/262w45L5/
źródło
Możesz zmienić „szablon / popover / popover.html” w pliku „ui-bootstrap-tpls-0.11.0.js” Zapis: „bind-html-unsafe” zamiast „ng-bind”
Pokaże wszystkie popover z HTML. * jego niebezpieczny HTML. Używaj tylko, jeśli ufasz HTML.
źródło
Możesz użyć zdarzenia popover i kontrolować szerokość za pomocą atrybutu „data-width”
źródło
Dodaj to na dole pliku popper.js:
Źródło: https://github.com/twbs/bootstrap/issues/23590
źródło