layui点击图片实现预览功能

layui点击图片实现预览功能，要怎么实现呢？ HTML内使用代码： img src="..." alt="..." width="200px" height="200px" class="layui-upload-img" onclick="previewImg(this)" JS代码部分： function previewImg(obj) { var img = new Image(); img.src = obj.src; var height=img.height,width=img.width;

<img src="..." alt="..." width="200px" height="200px" class="layui-upload-img" onclick="previewImg(this)">

 function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        var height=img.height,width=img.width;
        if(img.height > 600) {
            height = '600px';
            width=(600/(img.height))*(img.width);
        }
    
        var imgHtml = "<img src='" + obj.src + "' height='"+height+"' width='"+width+"' />";
        //弹出层
        layer.open({
            type: 1,
            offset: 'auto',
            area: [width,'auto'],
            shadeClose:true,//点击外围关闭弹窗
            scrollbar: false,//不现实滚动条
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
               
            }
        });
    }