bootstrap使用popover插件实现点击按钮显示二维码图片

popover插件用法
话不多说，先上图：

js实现这个的原理也简单，在按钮上绑定一个点击事件，将相对应的元素设置隐藏和显示。但是这个网页使用bootstrap做的，就懒得费功夫自己写啦。

第一步我们先写一个标签

<a class="btn btn-black phone-btn" tabindex="0" data-trigger="focus" title="iphone用户" data-container="body" data-toggle="popover" data-placement="bottom" data-content="ddd" >IPHONE</a>
我这么懒的人，当时选择直接copy bootstrap中的示例啦
注意：bootstrap中有声明的：由于性能的原因，工具提示和弹出框的 data 编程接口（data api）是必须要手动初始化的。

所以第二步，我们要在js中手动初始化

$('[data-toggle="popover"]').popover()
ok，要是你的业务只需要有个什么提示信息的，把你的内容写在 data-content=""里面，这样就完全ok

but，我们需要二维码呀，data-content里面是不能直接写html代码的，会被当作文本信息输出噢

ok第三步，我们需要修改一丢丢js代码

将之前初始化的代码注释掉，修改为：

$('[data-toggle="popover"]').popover({
      trigger: 'focus', // 这个是定义鼠标事件，等于data-trigger="focus"
      html: true // 关键在这里， 这样修改之后，我们的data-content里面就可以写html代码啦
 })

那修改一下a标签内容：
<a class="btn btn-black phone-btn" tabindex="0" data-trigger="focus" title="iphone用户" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<img class="phone-qrcode" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1535336714&di=cb361a7d90f16c1f4a01248124e0eede&src=http://imgs.soufun.com/news/2015_08/19/news/1439970601862_000.jpg"/>' >IPHONE</a>
大工告成！奶思