HTML 内的标签 Bootstrap 弹出窗口未呈现
HTML tags inside Bootstrap popover are not rendered
我遇到了问题,我无法弄清楚为什么无法呈现弹出框内的 HTML 标签。
JS fiddle 这里:http://jsfiddle.net/792xcgju/
<!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="top">Popover Example</a>
<hr>
<!-- Popover #2 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</a>
<!-- Content for Popover #1 -->
<div id="a1" class="hidden">
<div class="popover-heading">This is the heading for #1</div>
<div class="popover-body">
<div class="pagination_content">
<div class="page-jump-form">
<div class="input-group input-group-sm">
<input type="number" class="inputbox form-control" min="1" max="999999" />
<div class="input-group-btn">
<input type="button" class="btn btn-default btn-sm" value="{L_GO}" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content for Popover #2 -->
<div id="a2" class="hidden">
<div class="popover-heading">This is the heading for #2</div>
<div class="popover-body">This is the body for #2<br>
With <b>html</b> content
</div>
</div>
JS:
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
弹出窗口:
<!-- Content for Popover #1 -->
显示代码失败
<!-- Content for Popover #2 -->
工作正常,但它只是基于文本。
我做错了什么?
您只需添加选项
sanitize: false
并且它不会清理内容,并根据需要呈现输入字段,如此处选项中所列:https://getbootstrap.com/docs/4.3/components/popovers/#options
完整示例:
$(function(){
$("[data-toggle=popover]").popover({
sanitize: false // <-- ADD HERE
html: true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
我遇到了问题,我无法弄清楚为什么无法呈现弹出框内的 HTML 标签。
JS fiddle 这里:http://jsfiddle.net/792xcgju/
<!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="top">Popover Example</a>
<hr>
<!-- Popover #2 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</a>
<!-- Content for Popover #1 -->
<div id="a1" class="hidden">
<div class="popover-heading">This is the heading for #1</div>
<div class="popover-body">
<div class="pagination_content">
<div class="page-jump-form">
<div class="input-group input-group-sm">
<input type="number" class="inputbox form-control" min="1" max="999999" />
<div class="input-group-btn">
<input type="button" class="btn btn-default btn-sm" value="{L_GO}" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content for Popover #2 -->
<div id="a2" class="hidden">
<div class="popover-heading">This is the heading for #2</div>
<div class="popover-body">This is the body for #2<br>
With <b>html</b> content
</div>
</div>
JS:
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
弹出窗口:
<!-- Content for Popover #1 -->
显示代码失败
<!-- Content for Popover #2 -->
工作正常,但它只是基于文本。
我做错了什么?
您只需添加选项
sanitize: false
并且它不会清理内容,并根据需要呈现输入字段,如此处选项中所列:https://getbootstrap.com/docs/4.3/components/popovers/#options
完整示例:
$(function(){
$("[data-toggle=popover]").popover({
sanitize: false // <-- ADD HERE
html: true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});