Bootstrap 4 表格 HTML 弹出窗口
Bootstrap 4 Form HTML Popover
正在尝试从 Bootstrap 3 升级。
以前我在一些弹出窗口中有一个表单,现在内容为空。我无法弄清楚是什么改变了它。
表单是动态演示的,但是可以简单地复制它。
HTML:
<a id="workingpopovertest" data-toggle="popover">
<button>Test</button>
</a>
<br /><br /><br /><br />
<a id="brokenpopovertest" data-toggle="popover">
<button>Test</button>
</a>
脚本:
$("#brokenpopovertest").popover({
html: true,
title: "Broken Popover",
animation: true,
content: "<form>Input<input type='text' /></form>",
container: "body"
});
$("#workingpopovertest").popover({
html: true,
title: "Working Popover",
animation: true,
content: '<h1>I Work Well</h1>',
container: "body"
});
给出这个结果(正如元素命名所预期的那样!!
编辑添加
这是与:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
您正在搜索 sanitize
选项
$("#brokenpopovertest").popover({
html: true,
title: "Broken Popover",
animation: true,
sanitize: false,
content: "<form>Input<input type='text' /></form>",
container: "body"
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<a id="brokenpopovertest" data-toggle="popover">
<button>Test</button>
</a>
正在尝试从 Bootstrap 3 升级。 以前我在一些弹出窗口中有一个表单,现在内容为空。我无法弄清楚是什么改变了它。 表单是动态演示的,但是可以简单地复制它。
HTML:
<a id="workingpopovertest" data-toggle="popover">
<button>Test</button>
</a>
<br /><br /><br /><br />
<a id="brokenpopovertest" data-toggle="popover">
<button>Test</button>
</a>
脚本:
$("#brokenpopovertest").popover({
html: true,
title: "Broken Popover",
animation: true,
content: "<form>Input<input type='text' /></form>",
container: "body"
});
$("#workingpopovertest").popover({
html: true,
title: "Working Popover",
animation: true,
content: '<h1>I Work Well</h1>',
container: "body"
});
给出这个结果(正如元素命名所预期的那样!!
编辑添加
这是与:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
您正在搜索 sanitize
选项
$("#brokenpopovertest").popover({
html: true,
title: "Broken Popover",
animation: true,
sanitize: false,
content: "<form>Input<input type='text' /></form>",
container: "body"
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<a id="brokenpopovertest" data-toggle="popover">
<button>Test</button>
</a>