如题，我想要点击图片的时候弹出居中显示放大。这个功能也是看别人的实现方法而来的，只是有细微的变化轻松解决点击图片放大问题 下面是我自己仿造他写的
效果如下 大致说下原理，点击图片触发单击响应事件，半透明的包含块全屏显示，然后图片进行放大居中显示。 包含块如下：
其样式为
.imgPreview {
display: none;
top: 0;
left: 0;
width: 100%; /*容器占满整个屏幕*/
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
}
1. 实现包含块全屏显示： 开启定位fixed脱离文档流，设置top和left为0（最好top和left都要设置0，我看原作者只设置了top，但我在应用到bootsrap中的时候会出现左边没有覆盖完，必须要设置left也为0），width和height100%使的包含块全屏覆盖，最后设置了半透明度。因为开始设置的隐藏，只有单击图片后才会全屏覆盖显示。
2. 实现图片居中显示： 通过jquery将包含块里的src设置成原有的图片src，然后通过设置包含块内的css样式达到居中放大的目的。其中通过设置width的值（百分比是相对于屏幕尺寸）达到放大的目的，通过设置top和left（百分比是相对于屏幕尺寸）进行定位，使得图片左上角在屏幕正中间，然后设置transform：translate（-50%，-50%）相对自身尺寸移动，使得图片中心位置移动到屏幕中心位置。
.imgPreview img {
z-index: 100;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
ps1：中间的代码添加了cursor属性是为了给鼠标移入图片时鼠标指针变成放大镜的模样，具体见通过添加css样式cursor属性，改变鼠标的外形，变成放大镜 ps2:开启fixed定位后，width、height、left、top的百分比都是相对于屏幕而言