Использование HTML внутри всплывающего окна Bootstrap

Быстрый ответ

Вы можете использовать HTML-контент в всплывающих окнах Bootstrap, определив его через параметр content и включив параметр html:

$('[data-toggle="popover"]').popover({
  html: true,
  content: '<strong>Выделенный текст</strong> и <a href="#">ссылки</a>.'
});

Интерпретация HTML будет включена для всех элементов с атрибутом data-toggle="popover".

Дополните окно интерактивностью

Сделайте всплывающее окно интерактивным элементом, используя функцию для динамической подгрузки HTML-содержимого:

$('#popoverElement').popover({
  html: true,
  content: function() {
    return $('#contentForPopover').html();
  }
});

Такое содержимое может быть скрыто на странице или формироваться динамически.

Защитите свой контент

При загрузке HTML в всплывающие окна обращайте внимание на безопасность, чтобы предотвратить возможные XSS-атаки. Для этого используйте санитизацию:

const safeContent = DOMPurify.sanitize(unsafeContent); 
$('#popoverElement').popover({
  html: true,
  content: safeContent 
});

Кастомизируйте всплывающие окна

Вы можете настроить всплывающие окна, используя атрибуты data-trigger и data-placement:

<a role="button" data-toggle="popover" data-trigger="focus" data-placement="right" title="Заголовок" data-content="Угадайте содержимое">Нажмите, чтобы открыть</a>

Разграничьте содержимое и заголовки

Используйте атрибуты data-content и title для более четкого разграничения содержимого и заголовков:

<button type="button" title="Заголовок" data-container="body" data-toggle="popover" data-placement="top" data-content="Открыть всплывающее окно">
  Всплывающее окно сверху
</button>

Атрибут data-container="body" позволит контролировать вывод всплывающих окон внутри тэга body и избегать проблем с переполнением.

Организуйте содержимое всплывающего окна

Вы можете скрыть содержимое всплывающих окон в невидимых контейнерах:

<div id="contentForPopover" style="display: none;">
  <img src="image.jpg"> 
</div>

Визуализация

Всплывающие окна в Bootstrap – это интерактивные инструменты многофункционального назначения:

Обычная воздушная шарик (🎈): Простая доставка текста.

_Vue.js_ Всплывающее окно Bootstrap (🎈💬):
[🔧, 🖼️, 🎯, 💻]

# HTML-элементы (⚙️, 🖼️) наполняют шарик полезным содержимым.

Один клик – и перед пользователем открывается весь спектр возможностей:

🎈💬 ➡️ Клик! ➡️ [🔧 Интерактивная панель, 🖼️ Мини-галерея, 🎯 Информационные блоки, 💻 Код на обозрении]

# Вы можете выступать волшебником, выполняющим фокусы с помощью всплывающего окна.

Не забудьте про тестирование

Не забудьте инициализировать ваши всплывающие окна, проверяя атрибуты и запуская JavaScript после их установки:

$(function(){
  $('.popover-with-html').popover({ html: true });
});

Помните, что тщательное тестирование обеспечит надежное функционирование всплывающих окн в любом браузере.

Несколько советов по использованию всплывающих окон

Оживляйте содержимое с помощью JavaScript

$("#dynamicPopover").popover({
  html: true,
  content: fetchDynamicContent 
});

Подробнее об этом расскажет наш спикер на видео

Особое внимание уделяйте ссылкам <a>

Учтите, что управлять поведением ссылок можно через event.preventDefault().

Полезные материалы

1. Всплывающие окна · Bootstrap — официальное руководство Bootstrap по созданию всплывающих окон.
2. Подделка содержимого | OWASP — информация об обеспечении безопасности HTML-содержимого.
3. HTML-атрибут data-* — подробный материал об атрибутах data-*.
4. Форматирование текста в JavaScript | MDN — руководство по работе с HTML в JavaScript.
5. GitHub – cure53/DOMPurify — инструмент для очистки HTML-строк от потенциально опасного содержимого.