Html 如何向弹出窗口添加 sanitize： false 选项

发布于12月26日

我正在试着把一个按钮放在Popovers的Bootstrap里.但我没有成功.

我正在使用Bootstrap-Popover.我想在爆米花里放一个纽扣.

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
});
popoverList.forEach(function (popover) {
   popover.getTipElement().getElementsByClassName('.servicePOP').innerHTML += '<button type="button" class="btn btn-primary">My Button</button>';  
   });

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="A short description">
  <div class="card position-relative">
    <div class="d-block card-icon">
      <img src="images.png" class="card-icon position-absolute start-0 end-0 m-auto rounded-circle mb-5 lazy" alt="Title">
    </div>
    <div class="card-body text-center mt-5 pt-5">
      <a href="# class=" text-decoration-none text-dark ">
                <h5 class="card-title ">Title</h5>
            </a>
            <p>A short description</p>
            <a href="# " class="btn btn-primary ">More Details</a>
        </div>
    </div>
</div>

我的问题是:

如何将Sanitize:False选项添加到Popover？

const servicePOP = document.querySelector('.servicePOP') const popover = new bootstrap.Popover(servicePOP, { sanitize: false, html: true, content: '<button type="button" class="btn btn-primary">My Button</button>' })

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, options))

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl,{ sanitize: false, html: true, content: function() { const popExample = popoverTriggerEl.getAttribute('data-pop-example') return `<button type="button" class="btn btn-primary">${popExample}</button>`; } }))

Html 如何向弹出窗口添加 sanitize： false 选项

推荐答案

Html相关问答推荐

如何在两个弹性项目之间添加边框？

如何通过将项目包裹在迪夫中来保持最右列的对齐方式来对齐项目？

HTML图像无法正确放大和缩小规模

需要帮助实现悬停动画效果

如何在div中淡入和淡出渐变背景？

在Chrome中使用手写笔时，滚动条方向反转

我应该怎么做才能显示出整个字符串？

如何使用html的<；输入>；处理/绑定Angular 信号？

如何在排序上重用参数？

根据Tailwind CSS中的子计数而非子宽度进行对齐，并水平对齐

如何在悬停时使用 CSS 更改许多同级元素

CSS flex：0 0 auto创建了1像素的间隙

防止HTML输入中出现负数但接受小数

如何垂直平移一个元素，使其新位置位于另外两个元素之间？

您如何动态更改 Vue 中更高级别的标签的 CSS

如何从另一个 ng-template 获取输入值

使用 css 将内容居中并向左对齐？

为什么图像会影响我的
大小？

当我希望它只横向滚动时，可滚动菜单也会上下移动

两个按钮范围滑块的 CSS