遮掩层 的 灰色区域 关闭

Posted 2020-11-01 小白历险记~

生成二维码需要引用 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;
}

 

以上通过点击某处，然后根据指定内容生成二维码，在弹出层中显示二维码，然后是点击弹出层的灰色区域部分也可关闭弹出层。