带有 HTML 内容的 Bootstrap 4 弹出框
Posted
技术标签:
【中文标题】带有 HTML 内容的 Bootstrap 4 弹出框【英文标题】：Bootstrap 4 Popover with HTML Content 【发布时间】：2018-05-22 07:33:02 【问题描述】：这是我的代码，但它不起作用。
当我在其内容中使用带有 html 的原生 Bootstrap PopOver 时，前端没有显示 PopOver 并且 HTML 源格式错误。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<style>
.popover
color: #757575 !important;
</style>
</head>
<body>
<div class="container">
<span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div class="popover">text text</div>">Toggle popover</span>
</div>
<script>
$(function ()
$('[data-toggle="popover"]').popover()
)
</script>
</body>
</html>删除类属性。 它可以工作。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<style>
.popover
color: #757575 !important;
</style>
</head>
<body>
<div class="container">
<span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div>text text</div>">Toggle popover</span>
</div>
<script>
$(function ()
$('[data-toggle="popover"]').popover()
)
</script>
</body>
</html>我试图在引导弹出窗口中显示 HTML，但不知何故它不起作用。我在这里找到了一些答案，但它对我不起作用。如果我做错了什么，请告诉我。
【问题讨论】：
【参考方案1】：记得在 popover 元素上设置data-html="true"（连同其他data- 属性）。否则 HTML 内容将无法正确呈现。
更多细节可以在 Bootstrap 的文档中找到：https://getbootstrap.com/docs/4.6/components/popovers/#options
【讨论】：
正是我需要的。谢谢！【参考方案2】：只需像这样将popover 类用单引号括起来。
<div class='popover'>text text</div>
而不是
<div class="popover">text text</div>
【讨论】：
【参考方案3】：$element.popover(
animation: false,
html: true,
sanitize: false,
placement: 'bottom',
trigger: 'manual',
content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>',
);
【讨论】：
你应该总是解释你的答案。谢谢。sanitize 键是我的 html 出现的原因。谢谢。【参考方案4】：
您可以像这样使用它，而不是将data-html="true" 添加到所有弹出窗口中：
$('[data-toggle="popover"]').popover(html:true);
【讨论】：
以上是关于带有 HTML 内容的 Bootstrap 4 弹出框的主要内容，如果未能解决你的问题，请参考以下文章
html Bootstrap 3 - 带有可列表内容的导航栏
使用带有 jQuery 不显眼验证的 HTML-5 验证弹出窗口
Bootstrap -- 插件: 提示工具弹出框 警告框消息
e107 Bootstrap CMS（内容管理系统）v2，带有PHP、MySQL、HTML5、jQuery和Twitter Bootstrap。问题讨论室：https://gitter.im/e107