我有一个网页来测试 Bootstrap 3 弹出窗口,并且需要在正文中显示 html。
这里是显示弹出窗口的按钮的 html 和我用作弹出窗口主体模板的隐藏 div。
<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 的 Bootstrap 错误。解决方案是在弹出窗口设置数组中包含 sanitize: false。
关于javascript - 无法在 Bootstrap 3 弹出窗口中显示 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57403804/