Question

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

当我在其内容中使用带有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>

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

<!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，但不知何故它不起作用。我在这里找到了一些答案，但它对我不起作用。如果我做错了，请告诉我。

Answer 1

您可以在弹出范围内使用In [3]: rgba_hex( (222, 100, 34) ) Out[3]: '0xde6422ff' In [4]: rgba_hex( (0,255,255) ) Out[4]: '0x00ffffff' In [5]: rgba_hex( (0,255,255,0) ) Out[5]: '0x00ffff00'。

这会启用HTML内容。

在此处查看更多内容：http://getbootstrap.com/docs/4.0/components/popovers/#options

Answer 2

Just wrap the popover class in single quotes like this.

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

instead of

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

Answer 3

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

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

Answer 4

    $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>',
    });

带有HTML内容的Bootstrap 4 Popover

4 个答案: