JS实现图片点击后出现模态框效果

很多时候我们在浏览图片时，会发现点击图片后，会弹出一个被点击图片的放大图片浮在页面上，占满整个窗口。这就是图片模态框效果。 这个效果可以使用某些js库实现，如bpopupJs。但是在这里我们使用纯js实现，能够更好理解效果原理和实现方法。 一.实现思路 我们点击小图片之后,图片模态框出现，同时图片模态框上有一个关闭按钮和图片的标题。 因此，我们的实现思路就是： 图片模态框有大图片，关闭按钮，图片标题三部分。 将图片模态框隐藏，在点击小图片之后，模态框出现。 点击关闭按钮后，模态框隐藏。 二.HTML代码 首先，我们的原始页面上有一个图片如下： HTML代码如下： <h2>图片点击弹出模态框