仿微信弹出二维码

使用jquery插件生成二维码，然后弹出它。

先在页面引入：

<script src="./jquery-3.5.1.min.js"></script>
<script src="./jquery.qrcode.min.js"></script>

这是弹出框主体： 

    <div id="app">
        <p><a target="_blank" id="ercode">微信分享</a></p>
    </div>
    <div id="share_qrcode" class="share_qrcode">
        <div class="code_head">
            <span>保存二维码，分享到微信朋友圈</span>
            <p class="code_close" id="close">×</p>
        </div>
        <div id="code" class="code_main"></div>
        <div class="code_foot">
            <p>扫一扫，打开网页</p>
        </div>
    </div>
    <script>
        $(function() {
            function popup(popupName) {
                var sHeight = $(document).scrollTop();
                var wHeight = $(window).height();
                var wWidth = $(window).width();
                var popupHeight = $('#share_qrcode').height();
                var popupWeight = $('#share_qrcode').width();
                var posiTop = (wHeight - popupHeight) / 2 + sHeight;
                var posiLeft = (wWidth - popupWeight) / 2;
                console.log("sHeight:" + sHeight + ",窗口宽度：" + wWidth + ",窗口高度：" + wHeight + ",popupHeight:" + popupHeight + ",popupWeight" + popupWeight)
                popupName.css({
                    "left": posiLeft + "px"
                })
            }

            $('#ercode').click(function() {
                popup($('#share_qrcode'));
                $('#share_qrcode').fadeIn();
            });


            $('#close').on('click', function() {
                $('#share_qrcode').fadeOut();
            })

        })
    </script>

这个是生成二维码的：

<script>
    //二维码分享
    var url = window.location.href;
    $('#code').qrcode({
        text: url,
        render: "table", //table方式
        width: 200, //宽度
        height: 200, //高度
    });
</script>

这是弹出框样式：

        .share_qrcode {
            position: absolute;
            padding: 10px;
            width: 280px;
            height: 340px;
            background-color: #fff;
            border: 1px solid #d8d8d8;
            z-index: 990;
            font-size: 12px;
            display: none;
            left: 50%;
        }

        .share_qrcode .code_head {
            font-size: 12px;
            font-weight: bold;
            text-align: left;
            line-height: 16px;
            height: 16px;
            position: relative;
            color: #000;
        }

        .share_qrcode .code_close {
            width: 16px;
            height: 16px;
            position: absolute;
            right: 0;
            top: 0;
            color: #999;
            text-decoration: none;
            font-size: 16px;
        }
        .code_main {
            /* width: 200px; */
            /* height: 200px; */
            padding: 15px 10px;
            margin: 0 auto;
        }

        #code table {
            margin: 0 auto;
        }

        .code_foot {
            font-size: 12px;
            line-height: 22px;
            color: #666;
            text-align: left;
        }