项目中有一个需求,点击图片的缩略图可以弹出弹层,查看图片原图;点击关闭按钮或点击遮罩层部分关闭图片
- 代码实现如下:
- 项目是单页面,有多处需要用到查看图片详情,于是在主页面放置一个图片弹层的容器
<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: 800,
cancel: function () {
$('#window-img').css('display', 'none');
},
end:function () {
$('#window-img').css('display', 'none');
}
});
}
- 通过点击图片事件调用
$('#img').on('click',function () {
var curImgUrl = this.src;
windowImg(curImgUrl);
});
- 图片弹层效果图:
- 注意事项:
在写的过程中遇到了一些问题,总结一下避免再次踩坑:
- 由于弹层的图片是动态添加生成的,所以必须在调用layer.open()之前,先完成对弹层内容的渲染,这样可以实现弹层打开在页面居中~
- 由于弹层中图片显示的是原图,当图片过大时需要对它做一个最大宽高的限制,在网上找了很多方法都不是很好用,于是在img标签内加了一个 width='100%的设置,设置弹层最大宽度maxWidth:800,这样能够将图片按原比例缩小(但是该方法还有缺陷,只做了宽度的限制,如果图片高度过大的话,在页面中会显示不全造成遮挡)
- 设置图片最大宽度的格式是maxWidth:800,一开始按area的写法:maxWidth: ‘290px’,发现怎么都无效,文档还是要看仔细
- 只有当area: 'auto’时,maxWidth的设定才有效