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 tomakeQrcode()
method to generate the QR Code. Then unhide theqrcode
tag.
Note: Remember to download the qrcode.js library and replace with your own location before you use the code.