JavaScript
第一步：，还是先写出HTML基本代码，这里只用到了一张图片，弹出的图片还是原来的哪一张，这里我分别定义了两个div，small指缩小的时候的，magnify是点开之后的。
第二步：样式布局，最外面的div是用来定义small中的图片显示区域的，后面可以根据外部的其他div进行调整，这里small我用了display: flex;弹性布局，弹出显示也有个动画效果（从0到1的放大效果），这里close按钮用到的是绝对定位position: absolute;相对于magnify进行定位，而content则是position: fixed;相对于浏览器窗口进行定位。
通过以上的 样式设置我们就可以得到如下的图案了，窗口中只能一张略缩的小图在浏览器窗口的中央位置，其他样式已经被隐藏起来了，这里我加了一个鼠标放上去半透明的效果，这样就知道浏览器已经响应了我们的设置了，同样我给small添加了一个z-index: 1;，为了方便magnify放在该元素之上作参考。
第三步，实现交互效果，接下来我们要获取到要执行操作的DOM元素，然后在执行相应的点击事件即可实现我们前面的效果，这里我给small和magnify定义成id标签的目的就是为了方便我们对DOM元素的抓取，其他元素则通过他们的子元素形式进行获取。
这里用到两个赋值操作，一就是把略缩图中的图片传递给放大图中，magnifyImg.src = this.src;二是把后台中的alt属性传递给了span标签中，这样我们就不用单独提供图片的描述信息了,点击之后我们得到就是如下的图像了。
后面我想把弹出也添加到滑动轮播图中去，这样当我细看轮播中的信息时我就可以点击放大了，下面是图片弹窗的完整代码,有兴趣的可以试试：
CSDN代码排版比较好，有兴趣的可以查看这个
https://blog.csdn.net/kevinfan2011/article/details/86702612