javascript - bootstrap的popover.js自定义弹出内容问题
本文介绍了javascript - bootstrap的popover.js自定义弹出内容问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
上面图片是bootstrap中popoer的js自定义的文档说明,如果要在js中写自己想要弹出的内容,下面是我照文档写的,template那里用了es6插入大段html用的``这个符号应该是可以的吧。
$(function() {
$('[data-toggle="popover"]').popover({
html: true,
trigger: "click",
placement: 'bottom',
template: `<div class="popover" role="tooltip">
<div class ="arrow"></div>
<h3 class ="popover-title">SELECT A DATE</h3>
<div class ="popover-content">
<p>asdadqweqrqq</p>
</div>
</div>`
});
})
html:
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover">点我弹出/隐藏弹出框</button>
先说明,把template去掉加上title和content两个属性,能弹出内容。但是我现在想插入大段的html元素,请问我上述代码哪里出问题了?
解决方案
看了Stack Overflow上的一个答案,原来template是做一个模板,而content和title是内容,必须的。
html:
<button id="as" type="button" class="btn btn-lg btn-danger" data-toggle="popover">点我弹出/隐藏弹出框</button>
js:
$(function() {
var template = [
'<div class="popover">',
'<div class="arrow"></div>',
'<div class="popover-title"></div>',
'<div class="popover-content"></div>',
'</div>'
].join("");
var title = ['<h3 class ="popover-title">SELECT A DATE</h3>'].join("");
var content = [
'<p>asdadqweqrqq</p>'
].join("");
$('[data-toggle="popover"]').popover({
html: true,
trigger: "click",
placement: 'bottom',
title: title,
content: content,
template: template
});
})
这篇关于javascript - bootstrap的popover.js自定义弹出内容问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文