我的网站包含带有HTML代码的引导程序弹出窗口。这样的弹出窗口看起来像这样(为了可读性,我已经代替了弹出HTML放置了一个占位符):
<mark data-content="Fancy HTML here" data-html="true" data-toggle="popover">
This mark has a popover
</mark>
在data-content
中插入真实HTML会带来正确转义引号的问题。我发现了这个问题,看起来像是一个完全重复的问题:
How do I encode html for Bootstrap popover and tooltip content
被接受的答案建议将引号转义为"
这行不通,转义的引号未正确解析。我在这个小提琴中建立了一个示例:https://jsfiddle.net/z4t2sud3/3/
另一种选择是对弹出式窗口中的字符串使用单引号'
。此选项也很简单,可以正常使用。
但是,如果我想嵌套得更深,该怎么办?例如,我插入data-content
的HTML也可能包含弹出窗口。尽管这似乎是一个非常糟糕的设计构想,但使它正常工作会很好。
这里是双重嵌套弹出框的提琴手:https://jsfiddle.net/cwz3sayj/3/
答案 0 :(得分:1)
希望下面的代码段看起来像您想要的那样,您可以在创建弹出窗口实例时传递一个选项,在其中设置单击该实例时将显示的内容。由于第一次运行脚本时DOM中不存在第一级,因此必须在单击第一个弹出窗口后激活第二个弹出窗口。使用模板文字,您可以在编写的html代码中使用撇号或引号。
$('#firstPopover')
.popover({
html: true,
content: `<button id="secondPopover" class="btn">
Goto second level
</button>`
})
.on('shown.bs.popover', function() {
$('#secondPopover').popover({
html: true,
content: `This is the last level`
});
});
<br />
<button id="firstPopover" data-html="true" class="btn">
Goto first level
</button>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
现在唯一的问题是第一层在第二层之前关闭。