bootstrap popover 弹出二维码

产品在原有的页面上增加了一个二维码分享功能,调试阶段加上之后也没啥事,后来多加了些参数,结果微信扫不出来了。没办法把二维码的大小设置大了些之后,便可以扫了,但页面布局就完蛋了,最后只好使用popover来实现了。

  • 增加分享超链接
分享
  • 在超链标签上实现popover
  $('#shareLink').popover({
   trigger: 'manual',
   html: 'true',
   // 本来这里是打算用funciton提供已生成二维码的DIV,结果获取不到生成的二维码
   content: '
', animation: false, placement: 'left' }).on("mouseenter", function () { var self = this; $(this).popover("show"); // 只有show之后,popover的content才出现在dom中,此时才能生成二维码 $(".popover #qrcode").qrcode({ width: 160, height: 160, render: 'canvas', // 这里实际是个动态url,把代码简化了 text: 'http://www.baidu.com }); $(this).siblings(".popover").on("mouseleave", function () { $(self).popover('hide'); }); }).on("mouseleave", function () { var self = this; setTimeout(function () { if (!$(".popover:hover").length) { $(self).popover("hide") } }, 100); })

你可能感兴趣的:(bootstrap popover 弹出二维码)