layer点击小图预览图片-蒲公英云

layer点击小图预览图片

html代码：

<div id="window-img" style="display: none"></div>

封装一个函数

function windowImg(imgUrl) { 
    $('#window-img').empty();
    var img = "<img class='window-img' src='" + imgUrl + "' width='100%' />";
    $('#window-img').append(img);
    layer.open({ 
        type: 1,
        title: false,
        //resize:false,
        shadeClose: true, //点击遮罩关闭
        content: $('#window-img'),
        area: 'auto',
        maxWidth: 600,
        cancel: function() { 
            $('#window-img').css('display', 'none');
        },
        end: function() { 
            $('#window-img').css('display', 'none');
        }
    });
}

调用函数

$('#imgT').on('click', function() { 
    var curImgUrl = this.src;
    windowImg(curImgUrl);
});

注意事项：

在写的过程中遇到了一些问题，总结一下避免再次踩坑：
由于弹层的图片是动态添加生成的，所以必须在调用layer.open()之前，先完成对弹层内容的渲染，这样可以实现弹层打开在页面居中~
由于弹层中图片显示的是原图，当图片过大时需要对它做一个最大宽高的限制，在网上找了很多方法都不是很好用，于是在img标签内加了一个 width=’100%的设置，设置弹层最大宽度maxWidth:800，这样能够将图片按原比例缩小（但是该方法还有缺陷，只做了宽度的限制，如果图片高度过大的话，在页面中会显示不全造成遮挡）
设置图片最大宽度的格式是maxWidth:800，一开始按area的写法：maxWidth: ‘290px’，发现怎么都无效，文档还是要看仔细
只有当area: ‘auto’时，maxWidth的设定才有效

原文：https://blog.csdn.net/HuangsTing/article/details/99644548