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

Question

我正在使用 https://davidshimjs.github.io/qrcodejs/ 中的 QRcode.js，它在我的网页上运行良好，但我想使用 [=16= 在 dialog/alert 框中显示此生成的二维码] 脚本。任何人都可以帮助我，我该怎么做？

Answer 1

您可以在此处使用Bootstrap 模式。只需将 <div id="qrcode"></div> 放入模态正文中，即可完成。

这里是如何使用 Bootstrap 模式 - Bootstrap Modal

Answer 2

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

<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给出了一个完整的例子。

示例截图：

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

How to display the QR-code in popup box using java script?

javascript

jquery

qr-code