Прежде всего, если вы хотите использовать HTML внутри контента, вам нужно установить для параметра HTML значение true:
$('.danger').popover({ html : true});
Тогда у вас есть два варианта, чтобы установить контент для Popover
- Используйте атрибут data-content. Это опция по умолчанию.
- Используйте пользовательскую функцию JS, которая возвращает содержимое HTML.
Использование data-content : вам нужно экранировать HTML-контент, что-то вроде этого:
<a class='danger' data-placement='above'
data-content="<div>This is your div content</div>"
title="Title" href='#'>Click</a>
Вы можете либо выйти из HTML-кода вручную, либо использовать функцию. Я не знаю о PHP, но в Rails мы используем * html_safe *.
Использование функции JS : если вы сделаете это, у вас есть несколько вариантов. Самое простое, что я думаю, - это спрятать содержимое div в любом месте, а затем написать функцию для передачи его содержимого в popover. Что-то вроде этого:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
И тогда ваш HTML выглядит так:
<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>
Надеюсь, поможет!
PS: у меня были некоторые проблемы, когда я использовал popover и не устанавливал атрибут title ... так что не забывайте всегда устанавливать заголовок.
popover_content_wrapper
, это решение вызовет проблемы, потому что оно отображается в html (без ваших обработчиков). Тогда решение состоит в том, чтобы прослушать событие "вставлено.bs.popover" и повторно присоединить ваш обработчик к новому элементу, который теперь находится в DOM.Основываясь на ответе jävi, это можно сделать без идентификаторов или дополнительных атрибутов кнопок, например:
http://jsfiddle.net/isherwood/E5Ly5/
источник
Еще один альтернативный метод, если вы хотите просто посмотреть и почувствовать поп-ап. Ниже приведен метод. Конечно, это ручная вещь, но приятно работоспособная :)
HTML - кнопка
HTML - поповер
JS
источник
style="top: 200px; left: 90px;
дляbgform
div. Можно ли вместо этого вызвать код автоматического размещения начальной загрузки? Кроме того, вы можете использовать fadeToggle () или просто toggle () для различных эффектов в JavaScript.Поздно на вечеринку. Создавая другие решения. Мне нужен был способ передать целевой DIV в качестве переменной . Вот что я сделал.
HTML для источника Popover (добавлен атрибут data data pop, который будет содержать значение для целевого идентификатора DIV / или класса):
HTML для контента Popover (я использую класс начальной загрузки):
Автор сценария:
источник
В дополнение к другим ответам. Если вы разрешите
html
в настройках, вы можете передатьjQuery
объект контенту, и он будет добавлен к контенту поповера со всеми событиями и привязками. Вот логика из исходного кода:html
не разрешено, данные контента будут применяться как текстhtml
разрешено и данные содержимого являются строковыми, они будут применяться какhtml
источник
Все эти ответы упускают очень важный аспект!
Используя .html, innerHtml или outerHtml, вы фактически не используете указанный элемент. Вы используете копию html элемента. Это имеет некоторые серьезные недостатки.
То, что вы хотите сделать, это загрузить сам объект в поповер.
https://jsfiddle.net/shrewmouse/ex6tuzm2/4/
HTML:
JQuery:
источник
Почему так сложно? просто поместите это:
источник
источник