У меня возникла идея добавить немного более сложный HTML-код во всплывающее окно Bootstrap5 popper.js, но я не могу его отобразить.
План состоит в том, чтобы закончить кнопкой «Поделиться», которая открывает всплывающее окно. Это всплывающее окно должно содержать текущий URL-адрес и кнопку рядом с ним, которая добавляет ссылку в буфер обмена как событие onclick. У меня это работает с различными встроенными HTML, но другие теги, такие как button и input, остаются скрытыми.
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
}) <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div>
<button id='copyToClipboard' type="button" class="btn btn-danger" data-bs-toggle="popover" title="Copy URL"
data-bs-html="true" data-bs-content="
<h1>works1</h1>
<div>works2</div>
<span>works3</span>
<em>works4<em>
<input type='text' value='does not work' id='myInput'>
<button onclick='myFunction()'>does not work</button>
">
Share!
</button>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>Есть ли способ реализовать то, что я пытаюсь сделать, или popper.js, возможно, не позволяет использовать кнопки в всплывающем окне?
Я также попытался добавить data-bs-sanitize="false", как рекомендовано здесь: HTML-контент Popover с кнопкой и ввод не отображается, но для меня это ничего не изменило.
