顶部反馈首页底部

在Bootstrap的Popover里加入HTML代码

在写囧表情的的制作器生成页的时候遇到的需求,给大家分享一下。
其实bootstrap的popover插件默认提供了html参数,可以在popover里显示html,不过为了防止跨站关闭了,需要我们手动开启。

首先,你先写好个触发popover的东西(啥都行)
注意,不要像官方示例里加入 data-content 项,这个是后期初始化时我们在javascript里定义的。
比如这个:

<button type="button" class="btn btn-default" id="test-popover" data-container="body" data-toggle="popover">
    Test
</button>

接下来,编写一个div,里面写好弹出的HTML(你可以选择在css文件或者直接在style里写上 display: none; ,因为我们只需要这个div里的HTML代码):

<div id="test" style="display: none;">
    <a href="#">Test</a>
</div>   

然后就是最关键的javascript代码了(请写在文件内引入网页):

$('#test-popover').popover({
    html : true,
    content: function() {
        return $("#test").html();
    },
    placement : "bottom"
});

详细解释一下:
$().popover() 用来初始化popover。
html : true 这个值默认为false,即不可以解析HTML代码,这里改完使popover里的HTML代码可以被解析。
content 代替的是 data-content ,通过返回id为test的div的HTML的代码来填充popover(当然你也可以自己写在这里,不过不方便维护)。
placement : "bottom" 可选,用来确定弹出的方向,可以写在 data-placement 里。

完成!