Przede wszystkim, jeśli chcesz używać HTML w treści, musisz ustawić opcję HTML na true:
$('.danger').popover({ html : true});
Następnie masz dwie opcje ustawienia zawartości Popover
- Użyj atrybutu data-content. Jest to opcja domyślna.
- Użyj niestandardowej funkcji JS, która zwraca zawartość HTML.
Korzystanie z treści danych : musisz zmienić znaczenie zawartości HTML, na przykład:
<a class='danger' data-placement='above'
data-content="<div>This is your div content</div>"
title="Title" href='#'>Click</a>
Możesz ręcznie zmienić kod HTML lub użyć funkcji. Nie znam PHP, ale w Railsach używamy * html_safe *.
Korzystanie z funkcji JS : Jeśli to zrobisz, masz kilka opcji. Myślę, że najłatwiejszym rozwiązaniem jest umieszczenie zawartości div w dowolnym miejscu, a następnie napisanie funkcji, która przekaże jej zawartość do popover. Coś takiego:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
Twój kod HTML wygląda następująco:
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
Mam nadzieję, że to pomoże!
PS: Miałem kłopoty używając popover i nie ustawiając atrybutu title ... więc pamiętaj, aby zawsze ustawiać tytuł.
popover_content_wrapper
, to rozwiązanie spowoduje problemy, ponieważ jest renderowane do html (bez twoich programów obsługi). Rozwiązaniem jest więc nasłuchiwanie zdarzenia „insert.bs.popover” i ponowne dołączenie modułu obsługi do nowego elementu, który jest teraz w DOM.Opierając się na odpowiedzi jävi, można to zrobić bez identyfikatorów lub dodatkowych atrybutów przycisków, takich jak ten:
http://jsfiddle.net/isherwood/E5Ly5/
źródło
Inna alternatywna metoda, jeśli chcesz po prostu uzyskać efekt wyskoku. Oto metoda. Oczywiście jest to rzecz ręczna, ale ładnie wykonalna :)
HTML - przycisk
HTML - popover
JS
źródło
style="top: 200px; left: 90px;
dobgform
div. Czy istnieje sposób na wywołanie zamiast tego kodu automatycznego umieszczania programu bootstrap? Możesz także użyć fadeToggle () lub po prostu toggle (), aby uzyskać różne efekty w javascript.Spóźniony na przyjęcie. Opierając się na innych rozwiązaniach. Potrzebowałem sposobu, aby przekazać docelową DIV jako zmienną . Oto co zrobiłem.
HTML dla źródła Popover (dodano wyskakujący atrybut danych, który będzie zawierał wartość dla docelowego identyfikatora / lub klasy DIV):
HTML dla zawartości Popover (używam klasy bootstrap hide):
Scenariusz:
źródło
Oprócz innych odpowiedzi. Jeśli zezwolisz
html
na opcje, możesz przekazaćjQuery
obiekt do treści i zostanie on dołączony do zawartości popover ze wszystkimi zdarzeniami i powiązaniami. Oto logika z kodu źródłowego:html
nie jest dozwolone, dane o treści zostaną zastosowane jako teksthtml
dozwolone, a dane treści są ciągami, zostaną zastosowane jakohtml
źródło
Wszystkie te odpowiedzi pomijają bardzo ważny aspekt!
Używając .html, innerHtml lub externalHtml, w rzeczywistości nie używasz elementu, do którego się odwołuje. Używasz kopii kodu HTML elementu. Ma to poważne wady.
To, co chcesz zrobić, to załadować sam obiekt do popover.
https://jsfiddle.net/shrewmouse/ex6tuzm2/4/
HTML:
JQuery:
źródło
Dlaczego tak skomplikowane? po prostu umieść to:
źródło
źródło