无法在 Bootstrap 3 弹出窗口中显示 html [英] Can't display html in Bootstrap 3 popover

问题描述

我有一个网页来测试 Bootstrap 3 弹出框，需要在正文中显示 html.

这是显示弹出框的按钮的 html 和我用作弹出框主体模板的隐藏 div.

添加</button><div id="popover-content" class="隐藏"><form method="post"><div class="form-group"><label class="control-label">房间状态</label><input class="form-control" type="text">

<button class="btn btn-default btn-xs" type="submit">提交</button></表单>

这是显示弹出框的 javascript.我对格式错误表示歉意，将其粘贴为代码由于某种原因不起作用.

 $(function () {$('[data-toggle="popover"]').popover()})$('#status-add').popover({触发器:'点击'，html:对，title: "添加新房间状态",内容:函数(){var html=$("#popover-content").html()控制台日志(html)返回 html},位置:'正确'});

弹出框显示正确的标题，但正文为空.我可以从控制台日志中看到 html 变量中包含正确的 html.我还尝试将 popover html 设置设置为 false，这使得 html 以纯文本形式出现在正文中.

有什么想法吗?

解决方案

我找到了答案，这是一个引导程序错误，记录在 https://github.com/twbs/bootstrap/issues/28290.解决方案是在 popover 设置数组中包含 sanitize: false .

I have a web page to test out a Bootstrap 3 popover and need to display html in the body.

Here is the html for the button that displays the popover and a hidden div that I use as a template for the popover body.

<button class="btn btn-default" id="status-add" type="button" data-toggle="popover">Add</button>
<div id="popover-content" class="hidden">
    <form method="post">
        <div class="form-group">
            <label class="control-label">Room Status</label>
            <input class="form-control" type="text">
        </div>
        <button class="btn btn-default btn-xs" type="submit">Submit</button>
    </form>
</div>

Here is the javascript to display the popover. My apologies for the bad formatting, pasting it in as code doesn't work for some reason.

 $(function () {
  $('[data-toggle="popover"]').popover()
})

$('#status-add').popover({
    trigger: 'click',
    html: true,
    title: "Add new room status",
    content: function() {
        var html=$("#popover-content").html()
        console.log(html)
        return html
        },
    placement: 'right'
});

The popover is displayed with the correct title but the body is empty. I can see from the console log that the html variable has the correct html in it. I also tried setting the popover html setting to false which makes the html appear in the body as plain text.

Any ideas?

解决方案

I found the answer to this, it's a bootstrap bug documented at https://github.com/twbs/bootstrap/issues/28290. The solution is to include sanitize: false in the popover settings array.

这篇关于无法在 Bootstrap 3 弹出窗口中显示 html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！