个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试在 Bootstrap 弹出框内使用表单。一些基本的 html 有效(文本样式、按钮)，但表单无效。 (onclick() javascript 操作也不执行)
我尝试了多种选择，但在网上找不到任何解决方案。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<title>Hello, world!</title>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-html='true' data-content="
<h3>This works</h3>
<form>
This does not:<br>
<input type='text' name='firstname'><br>
Last name:<br>
<input type='text' name='lastname'>
</form>
">popover with html form</button>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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>
<script>
$(function () {
$('[data-toggle="popover"]').popover({
html: true
})
})
</script>
</body>
</html>
最佳答案
您的 HTML 很好并且可以工作(请参见下面的示例。)问题是需要设置一个新标志以允许在 BS 4.3.1 的弹出窗口中使用 HTML
根据他们对该版本的发行说明，这是一项重大更改:
“安全性:通过实现新的 HTML 清理程序修复了我们的工具提示和弹出窗口插件中的 XSS 漏洞 (CVE-2019-8331)”
在您的示例中查看下面的 sanitize 实现:
$(function() {
$('[data-toggle="popover"]').popover({
html: true,
sanitize: false,
})
})<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button style="margin: 20px;" type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-html='true' data-content="
<h3>This works</h3>
<form>
This does too:<br>
<input type='text' name='firstname'><br>
Last name:<br>
<input type='text' name='lastname'>
</form>
">popover with html form</button>
<button style="margin: 20px;" type="button" class="btn btn-lg btn-info" data-toggle="popover" data-html='true' data-content="
<h3>This works</h3>
<form>
This does duece:<br>
<input type='text' name='firstname'><br>
Last name:<br>
<input type='text' name='lastname'>
</form>
">Duece</button>关于jquery - bootstrap popover 中的 html 表单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56264280/
25
4
0
这里是 sandbox Antd pop over 正如您在示例中看到的，当您单击任意位置时，popover自动关闭。我想禁用该东西并仅通过单击按钮将其关闭。 我在 Popover 中没有看到这样的选
我在 gridview 更新、排序、分页方面遇到错误。页面加载时，网格通过 AJAX 正常加载。但是，在单击标题对行进行排序或单击任何分页按钮时，我收到一条错误消息: Uncaught Typ
我有一个标准的 Ionic 4 页面(主页)，它创建一个使用组件(BusinessDetails)和一个重定向到新页面(RequestTurn)的按钮的弹出窗口。但是，当我单击该按钮时，弹出窗口不会消
我为 bootstrap twitter 库调用了 js 文件，但我得到了指示的错误 $("a[rel=popover]").popover is not a function .
Apple 的“移动人机界面指南”是关于弹出框的: When possible, allow people to close one popover and open a new one with o
如果 .popover() 之后变成 .on('hidden.bs.popover')，我想'销毁'是 .on('shown.bs.popover' 所以它不会再 'show' 。一切似乎都正确，但看
我将 emberjs 与 twitter-bootstrap 一起使用，但只有 css，所以没有从 bootstrap 获取的 javascript。 我想让 popover 工作，它弹出了，但是 p
我正在使用 twitter bootstrap 在社交媒体上分享我的帖子，我创建了一个链接，其弹出窗口带有一些按钮内容，但是当我进一步点击弹出窗口中的按钮时，它们的弹出窗口功能不起作用。 Share
我有一些动态加载到包含弹出窗口的网页上的内容。出于这个原因，我必须将它们绑定(bind)到 body 上，以便它们正确加载和显示。 我想找到一种方法来在用户点击弹出窗口外或另一个弹出窗口触发器时隐
当用户点击弹出窗口外的任何地方时，我试图隐藏 Bootstrap 弹出窗口。 (我真的不确定为什么 Bootstrap 的创建者决定不提供此功能。) 我找到了以下代码 on the web但我真的不明
这里是material-ui的例子https://material-ui.com/utils/popover/#mouse-over-interaction 按照示例 material-ui 的这些步
我在表单中使用 Bootstrap 弹出窗口来显示一些仅适用于某些用户的可选选择。我注意到一个问题，即一旦弹出窗口关闭，表单选择(是或否单选按钮选项)就会丢失，并且 2 个单选按钮的表单输入不包含在表
当popover 出现 时如何显示背景，而当popover 消失 时如何显示背景？ $(function(){ var content = 'Pay Now Activation Cod
jsFiddle:http://jsfiddle.net/kAYyR/ 截图: 这是有效的: 点击按钮打开弹出框 在弹出框外点击关闭弹出框 点击 .close 按钮关闭弹出窗口 但是...当您再次单击
当尝试使用此模板在一行中显示弹出窗口时: Here we go: Show me popover with html 并通过添加 CSS 类，例如: myClass { white
首先，问题的 fiddle :jsfiddle.net 我正在使用一个弹出窗口，它的内容是 html，一个类为“click_me”的按钮。我有 jquery 来监听对“click_me”的点击，它应该
当使用弹出窗口API时，我想，当轻关闭发生时，停止弹出窗口关闭，并运行自定义js从屏幕上删除弹出窗口。。有办法做到这一点吗？。我试着这么做，但没成功。。。
我有一个表格，每个单元格都有一个弹出框，如下例所示: 对 popover 的调用: 0, 'edited' : i.edited, 'final-installment' : i.last }" p
我的 Storyboard使用 UINavigationController(VC0)，我使用 UIPopover 来加载新的 UIViewController (VC1)。从这个新的 UIViewC
这个问题在这里已经有了答案: iOS 13 - UIPopoverPresentationController sourceview content visible in the arrow (9
我是一名优秀的程序员,十分优秀！