图片点击放大是怎么做的？

这不是遮罩层吗？前端的伙伴都会吧

最简单的实现方式：

<a href="<?= $imgSrc?>" target="_blank"><img src="<?= $imgSrc ?>"></a>

还是jquery插件来的快一些

不要求会，但是总多少会点前端就能做。搜jquery zoom

fengyuanchen.github.io/jquery-view... 点击放大缩小各种功能

我的博客 使用的是 jquery.fancybox，只需几行代码即可实现无侵入图片放大功能

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" async></script>

<script>
$(".post-detail img").each(function() {
    var currentImage = $(this);
    currentImage.wrap("<a href='" + currentImage.attr("src") + "' data-fancybox='lightbox' data-caption='" + currentImage.attr("alt") + "'></a>");
});
</script>

我的开源项目：酷瓜云课堂 是这么实现的，layui layer 的方式：

$('.ke-content').on('click', 'img', function () {
        var width = $(window).width() * 0.8 + 'px';
        var height = $(window).height() * 0.8 + 'px';
        var src = $(this).attr('src');
        var style = 'max-width:' + width + ';max-height:' + height;
        var content = '<img alt="preview" src="' + src + '" style="' + style + '">';
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['auto'],
            skin: 'layui-layer-nobg',
            shadeClose: true,
            content: content,
        });
    });