HTML+JS + layer.js +qrcode.min.js 实现二维码弹窗

引入qrcode.js

<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

创建二维码显示位置

id 作为 定位标识

<a class="btn btn-primary" @click="showCAD"  >显示二维码</a>
<div id="qcodeLayer" style="display:none">
		<div id="qrcode" style="width:200px; height:200px;margin: 15px auto;"></div>
</div>

编写JS

由于我框架中引入了VUE ，所以 我是直接写在了VUE的方法中触发的,并引入layer弹窗js
关于layer弹窗详细使用方法可以去H-ui官网查看
https://www.h-ui.net/lib/layer.js.shtml

showCAD:function(){
	var documentTemp = document.getElementById("qrcode");
	var len = documentTemp.childNodes.length;
	//保证每次只显示一个二维码
	for(var i = len-1;i>=0;i--) {       // 从后往前
	    documentTemp.removeChild(documentTemp.childNodes[i]); 
	}
	var qrcode = new QRCode(document.getElementById("qrcode"), {
								width: 200,
								height: 200
							});
	qrcode.clear();
	qrcode.makeCode("自定义二维码内容");
	layer.open({
			type: 1,
			skin: 'layui-layer-molv',
			title: "弹窗标题",
			area: ['400px', '400px'],
			shadeClose: false,
			content: jQuery("#qcodeLayer"),
			btn: ["取消按钮"]
		});
	}