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

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