Я пытаюсь отобразить HTML внутри загрузочного поповера, но почему-то это не работает. Я нашел некоторые ответы здесь, но это не будет работать для меня. Пожалуйста, дайте мне знать, если я делаю что-то не так.
<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
Адриан Мохика
источник
источник
Ответы:
Вы не можете использовать,
<li href="#"
потому что он принадлежит<a href="#"
, поэтому он не работает, измените его, и все это хорошо.Здесь работает JSFiddle, который показывает вам, как создать загрузочный загрузчик.
Соответствующие части кода ниже:
HTML:
JavaScript:
И, кстати, вам всегда нужно хотя бы
$("[data-toggle=popover]").popover();
включить поповер. Но вместоdata-toggle="popover"
вас также можно использоватьid="my-popover"
илиclass="my-popover"
. Просто не забудьте включить их, например,$("#my-popover").popover();
в таких случаях.Вот ссылка на полную спецификацию: Bootstrap Popover
Бонус:
Если по каким - либо причинам вам не нравится или не можете прочитать содержимое всплывающего окна из
data-toggle
иtitle
тегов. Вы также можете использовать, например, скрытые div и немного больше JavaScript. Вот пример об этом.источник
Вы можете использовать атрибут
data-html="true"
:источник
Другой способ указать содержимое поповера повторно используемым способом - создать новый атрибут данных, например,
data-popover-content
и использовать его следующим образом:HTML:
JS:
Это может быть полезно, когда у вас много html для размещения в ваших всплывающих окнах.
Вот пример скрипки: http://jsfiddle.net/z824fn6b/
источник
Вам нужно создать экземпляр popover, у которого включена опция html (поместите его в свой файл javascript после кода JS popover):
$('.popover-with-html').popover({ html : true });
источник
Я использовал всплывающее окно внутри списка, я привожу пример через HTML
источник
Вам нужно только поставить
data-html="true"
ссылку на поповер. Будет работать.источник
Это небольшая модификация превосходного ответа Джека .
Следующее гарантирует, что простые всплывающие окна, без содержимого HTML, останутся без изменений.
JavaScript:
источник
Я очень не хочу помещать длинный HTML-код в атрибут, вот мое решение, ясное и простое (замените? Тем, что вы хотите):
затем
источник
Это старый вопрос, но это другой способ, используя jQuery для повторного использования поповера и продолжения использования исходных атрибутов данных начальной загрузки, чтобы сделать его более семантическим:
Ссылка
Пользовательский контент для отображения
Javascript
Скрипка с полным примером: http://jsfiddle.net/tomsarduy/262w45L5/
источник
Вы можете изменить «template / popover / popover.html» в файле «ui-bootstrap-tpls-0.11.0.js». Запись: «bind-html-unsafe» вместо «ng-bind»
Он покажет все поповера с HTML. * его небезопасный HTML. Используйте только если вы доверяете HTML.
источник
Вы можете использовать событие popover и управлять шириной с помощью атрибута «data-width»
источник
Добавьте это в конец вашего файла popper.js:
Источник: https://github.com/twbs/bootstrap/issues/23590
источник