二维码生成 及 遮掩层 的 灰色区域 关闭
生成二维码需要引用 jquery.qrcode.min.js 插件
html:
<div class="mask"> <div class="QRCodeContainer"> <p>请扫描下方二维码进行签到</p> <div id="code" class="code"></div> <div id="closeCodeBtn" class="closeCodeBtn">关闭</div> </div> </div>
css:
.mask { display: none; background: #B2B2B2; position: fixed; bottom: 0; width: 100%; height: 100%; z-index: 9; } .QRCodeContainer { background: #fff; width: 95%; margin: 0 auto; height: 70%; position: absolute; bottom: .1rem; left: .1rem; border: 1px solid transparent; border-radius: 5px; text-align: center; padding-top: .6rem; } .code { padding: .5rem 0; } .closeCodeBtn { width: 100%; height: .4rem; line-height: .4rem; background: #F2F2F2; border-top: 1px solid #E2E2E2; color: #3FBBF6; position: absolute; bottom: 0; letter-spacing: .1rem; }
js:
$(".mask").on("click", function(e) {//遮掩层灰色区域 if(e.target == $(".mask")[0]) { $(".mask").hide("zoom-fade-in"); } e.stopPropagation(); });
生成二维码【网摘】:
mui('body').on('tap', '.actStates', function() {//扫码签到 var codeId = $(this).attr("data-code-id");//id var codeTitle = $(this).attr("data-code-title");//title var codeStr = '{"id":"' + codeId + '","Title":"' + codeTitle + '"}'; $("#code").empty(); $("#code").qrcode({ render: "canvas", //table、canvas方式 width: 200, //宽度 height: 200, //高度 text: toUtf8(codeStr) }); $(".mask").show("flip-rx"); });
上方所用 toUtf8 方法【网摘】(当传递给 qrcode 的内容中存在中文,可用以下方法转换格式) :
function toUtf8(str) { var out, i, len, c; out = ""; len = str.length; for(i = 0; i < len; i++) { c = str.charCodeAt(i); if((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if(c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; }
以上通过点击某处,然后根据指定内容生成二维码,在弹出层中显示二维码,然后是点击弹出层的灰色区域部分也可关闭弹出层。