使用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;}

總結

以上是生活随笔為你收集整理的仿微信弹出二维码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。