我有一个网页来测试Bootstrap 3弹出窗口,并且需要在正文中显示html。

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

<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>


这是显示弹出框的JavaScript。我为格式错误而道歉,由于某种原因将其粘贴为代码无效。

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


弹出窗口显示正确的标题,但正文为空。我可以从控制台日志中看到html变量中包含正确的html。我还尝试将popover html设置设置为false,这会使html在正文中显示为纯文本。

有任何想法吗?

最佳答案

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

关于javascript - 无法在Bootstrap 3弹出窗口中显示html,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57403804/

10-12 13:10
查看更多