bootstrap气泡组件popover的使用

在做一些tips或者不需要展示太多的内容的消息框时,modal显然太重了也会打断用户浏览.

popover的使用很简单网上也很多例子,我这里只讲一下遇到的问题.
当一个popover内容模板需要在页面多个popover多处调用的时候,第一次调用后兑其内容的修改是没有办法reset的.
使用如下的方法可避免这个问题

1. popover的HTML模板,template标签包裹的内容在浏览器上不会显示出来

<template id="player-template">
  <div id="player-plugin" class="" onclick="event.stopPropagation()">
    <a class="btn btn-info btn-sm glyphicon played-handle glyphicon-pause" onclick="phoneBehavior.pauseOrContinuePlay();">暂停</a>
    <a class="btn btn-info btn-sm glyphicon played-handle glyphicon-backward"    onclick="phoneBehavior.backFastPlay();">快退</a>
    <a class="btn btn-info btn-sm glyphicon played-handle glyphicon-forward"     onclick="phoneBehavior.foreFastPlay()">快进</a>
    <a class="btn btn-info btn-sm glyphicon played-handle glyphicon-stop"        onclick="phoneBehavior.stopPlay();    ">停止</a>
  </div>
</template>

2. 生成popover的dom

<script>
  function getPlayerContent() {
    var panel =  document.createElement("div")
    panel.innerHTML = $("#player-template").html()
    return panel;
  }
</script>

3. 调用

//显示
$('#myElement').popover({html:true,title:"录音播放",content:getPlayerContent})
               .popover('show');
//销毁
$('#myElement').popover('destroy')

4.指定容器

在初始化参数里指定容器:container:’#caseTables’,即可在指定的id为caseTables的容器生成popover的html,便于管理;如果不指定或者container:’false’则默认在body最后生成

$(‘#myElement’).popover({html:true,title:”录音播放”,content:getPlayerContent,container:’#caseTables’})
.popover(‘show’);