带有 HTML 内容的 Bootstrap 4 弹出框答案

【问题标题】：Bootstrap 4 Popover with HTML Content带有 HTML 内容的 Bootstrap 4 弹出框
【发布时间】：2018-05-22 07:33:02
【问题描述】：

这是我的代码，但它不起作用。

当我在其内容中使用带有 HTML 的原生 Bootstrap PopOver 时，前端没有显示 PopOver 并且 HTML 源格式错误。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
        <title>test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>   
        <style>
            .popover{
                color: #757575 !important;
            }
        </style>
    </head>
    <body>
        <div class="container">
             <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div class="popover">text text</div>">Toggle popover</span>
        </div>
        <script>
            $(function () {
                $('[data-toggle="popover"]').popover()
            })
        </script>
    </body>
</html>

删除类属性。它可以工作。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
        <title>test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>   
        <style>
            .popover{
                color: #757575 !important;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div>text text</div>">Toggle popover</span>
        </div>
        <script>
            $(function () {
                $('[data-toggle="popover"]').popover()
            })
        </script>
    </body>
</html>

我试图在引导弹出窗口中显示 HTML，但不知何故它不起作用。我在这里找到了一些答案，但它对我不起作用。如果我做错了什么，请告诉我。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

记得在 popover 元素上设置data-html="true"（连同其他data- 属性）。否则 HTML 内容将无法正确呈现。

更多细节可以在 Bootstrap 的文档中找到：https://getbootstrap.com/docs/4.6/components/popovers/#options

【讨论】：

正是我需要的。谢谢！

【解决方案2】：

只需像这样将popover 类用单引号括起来。

<div class='popover'>text text</div>

而不是

<div class="popover">text text</div>

【讨论】：

【解决方案3】：

$element.popover({
    animation: false,
    html: true,
    sanitize: false,
    placement: 'bottom',
    trigger: 'manual',
    content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>',
});

【讨论】：

你应该总是解释你的答案。谢谢。
sanitize 键是我的 html 出现的原因。谢谢。

【解决方案4】：

您可以像这样使用它，而不是将data-html="true" 添加到所有弹出窗口中：

$('[data-toggle="popover"]').popover({html:true});

【讨论】：