How to generate a QR Code and display it in a popup box

Here it will show you how to generate a QR Code using javascript and display it in a popup box with bootstrap. The effect is as below:

qr code demo is a live demo. URL to QRCode is an online tool to convert an URL to a QRCode image.

Use qrcode.js to generate a QR Code

Using javascript to generate a QR Code reduces the server load. qrcode.js is such a javascript library for making QR Code. It supports cross-browser and has no dependencies.

Its usage is simple, just add a tag in html and use makeCode() method of QRCode object to generate a QR Code within the tag:

<div id="qrcode"></div>
<script type="text/javascript" src="./qrcode.min.js"></script>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 128,
    height: 128
});
qrcode.makeCode("https://www.gloomycorner.com")
</script>

Display QR Code with bootstrap popover component

Bootstrap is the most popular HTML, CSS, and JS library developed by twitter. It depends on jQuery library. Its popover component popups a box to display something when a button is clicked. We can use it to popup the generated QR Code above.

Its basic usage is as below:

<a class="btn btn-success" tabindex="0" title="popover" role="button" data-toggle="popover" data-trigger="focus" data-content="content">popover</a>
<script>
    jQuery(document).ready(function(){
        jQuery('[data-toggle="popover"]').popover();
    });
</script>

Below is a full example to popover a QR Code generated by qrcode.js (Remember to download qrcode.js library before you use the code):

<div class="container">
    <h1>Demo: generating a QR Code and display it in a popup box</h1>
    <p>Click below button to popover the QR Code generated by qrcode.min.js:</p>

    <a class="btn btn-success" tabindex="0" title="QR Code" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" 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 src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<script type="text/javascript" src="./qrcode.min.js"></script>
<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>

The idea in above example is :

• Add a hidden tag (i.e. <div id="qrcode"></div>) for holding the QR Code that will be generated.
• When the button that popups a box is clicked, pass its data-url value to makeQrcode() method to generate the QR Code. Then unhide the qrcode tag.

Note: Remember to download the qrcode.js library and replace with your own location before you use the code.