之前我的公众号图片和微信号图片都是直接在博客右边的侧边栏，但是看着确实不咋美观。今天折腾了下，把样式和现实方式做了个调整。现在是放在博客的头部。

之前在张洪HEO的博客看到了文章《微信公众号静态单页 - 优雅的让用户关注你的公众号》，大佬是做了一个单独的页面。大佬魔改的Butterfly主题和自己设计的显示方式还是相融合地很自然。但是小陶的handsome主题似乎引入的位置不太好确定。于是小陶就在自己想办法看看怎么实现舒服点。

实现的过程就不详细记录了，大家估计也不感兴趣。反正经过多次优化我自己是满意了，而且考虑了很多的因素，比如图片只有在用户点击按钮后才会加载，从而节省了页面加载时的资源消耗。

JavaScript部分

// 获取所有按钮和弹窗
var buttons = document.getElementsByClassName("qrButton");
var modals = document.getElementsByClassName("modal");

// 为每个按钮绑定事件
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
        var modal = this.nextElementSibling; // 获取相邻的弹窗
        var img = modal.querySelector("img"); // 获取弹窗中的图片
        if (img && img.getAttribute("data-src")) {
            img.src = img.getAttribute("data-src"); // 将data-src的值赋给src
        }
        modal.style.display = "block";
    }
}

// 为每个关闭按钮绑定事件
var closeButtons = document.getElementsByClassName("close");
for (var i = 0; i < closeButtons.length; i++) {
    closeButtons[i].onclick = function() {
        var modal = this.closest(".modal"); 
        modal.style.display = "none";
    }
}

// 点击窗口外部时隐藏弹窗
window.onclick = function(event) {
    for (var i = 0; i < modals.length; i++) {
        if (event.target == modals[i]) {
            modals[i].style.display = "none";
        }
    }
}

CSS部分

.qrButton {
    background-color: rgba(0, 0, 0, 0); /* 无背景 */
    color: #777; 
    padding: 14px 20px; /* 内边距 */
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px;
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
    height: 50px;
}

.qrButton:hover {
    background-color: #46d4f75e; /* 鼠标悬停时的背景颜色 */
}

/* 弹出窗口样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定位置 */
    z-index: 1; /* 置于顶层 */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); /* 背景颜色 */
    background-color: rgba(0,0,0,0.4); /* 背景颜色带透明度 */
    padding-top: 60px; /* 上边距 */
}

/* 弹出窗口内容样式 */
.modal-content {
    background-color: #fefefe; /* 背景颜色 */
    margin: 5% auto; /* 居中 */
    padding: 20px; /* 内边距 */
    border: 1px solid #888; /* 边框 */
    width: 500px; /* 固定宽度 */
    height: 500px; /* 固定高度 */
    border-radius: 10px; /* 圆角 */
    text-align: center; /* 内容居中 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 二维码图片样式 */
.modal-content img {
    max-width: 100%; /* 图片最大宽度为容器宽度 */
    max-height: 100%; /* 图片最大高度为容器高度 */
    object-fit: contain; /* 保持图片比例 */
}

/* 关闭按钮样式 */
.close {
    color: #aaa; /* 颜色 */
    float: right; /* 右浮动 */
    font-size: 28px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    position: absolute; /* 绝对定位 */
    top: 10px; /* 距离顶部 */
    right: 15px; /* 距离右侧 */
}

.close:hover,
.close:focus {
    color: black; /* 鼠标悬停或聚焦时的颜色 */
    text-decoration: none; /* 去掉下划线 */
    cursor: pointer; /* 鼠标指针样式 */
}

HTML部分

        <button class="qrButton"><img src="你的图片地址" alt="二维码" title="二维码" width="30px"/></button>
        <div class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <img data-src="图片地址" alt="二维码">
            </div>
        </div>
        <script src="https://imgbed.52txr.cn/selfpop/scriptv0.8.js?auth_key=1735831498-6446eccef2594e990bd2ac1c11a7cdf9-0-686ce118a245628317c5ecaec83e0f26"></script>

如果有多个按钮，js放在最下面一个的最后一行就可以。

最终效果

最终的效果就是如图所示。