如何使用java脚本在弹出框中显示QR码？

Question

我正在使用来自https://davidshimjs.github.io/qrcodejs/的QRcode.js，它在我的网页上工作正常，但我想在使用java脚本的对话框/警告框中显示这个生成的qr代码。任何人都可以帮助我，我该怎么做？

Answer 1

您可以在此处使用Bootstrap Modal。把<div id="qrcode"></div>放在模态体内，然后完成。

以下是如何使用Bootstrap Modal - Bootstrap Modal

Answer 2

下面的代码使用bootstrap在弹出框中显示qrcode.js生成的QR码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <a tabindex="0" role="button" class="btn btn-success" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="QR Code" data-url="https://www.gloomycorner.com">Popover QR Code</a>
  <div id="qrcode" style="display:none; width:auto; height:auto;padding:15px;"></div>
</div>
<script type="text/javascript">
  var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 120,
    height: 120
  });

  function makeQrcode(e) {
    qrcode.makeCode(e.attr("data-url"));
  }
  jQuery(document).ready(function() {
    jQuery("[data-toggle='popover']").popover(
      options = {
        content: jQuery("#qrcode"),
        html: true // important! popover html content (tag: "#qrcode") which contains an image
      }
    );

    jQuery("[data-toggle='popover']").on("show.bs.popover", function(e) {
      makeQrcode(jQuery(this));
      jQuery("#qrcode").show();
    });
  });
</script>

How to generate a qr code and display it in a popup box给出了一个完整的例子。

该示例的屏幕截图：