本文介绍如何使用纯JavaScript和CSS实现点击图片后弹出模态框的效果。通过HTML结构搭建、CSS样式设置以及JS事件监听，无需依赖第三方库即可实现图片放大显示与关闭功能，并包含简单的缩放动画效果。
纯JavaScript实现图片点击弹出模态框
在浏览网页图片时，经常可以看到点击图片后，原图会放大并浮现在页面中央，覆盖整个窗口，这种交互效果被称为图片模态框。
虽然可以使用如bpopupJs等JavaScript库来快速实现该功能，但为了深入理解其底层原理和具体实现逻辑，本文将演示如何仅使用原生JavaScript来完成这一效果。
实现思路
一、实现思路
当用户点击缩略图时，需要触发模态框的显示，同时模态框内部应包含放大的图片、一个用于关闭模态框的按钮以及图片的标题说明。
基于上述需求，实现该效果的核心逻辑如下：
模态框的结构由三部分组成：用于展示的大图片、关闭按钮以及图片标题区域。
初始状态下，模态框处于隐藏状态；当用户点击页面上的小图片时，通过JavaScript控制模态框变为可见。
当用户点击模态框内的关闭按钮时，通过JavaScript将模态框重新设置为隐藏状态。
HTML代码结构
二、HTML代码结构
首先，在原始页面中放置一张供点击的图片，示例如下：
对应的HTML代码如下：
<h2>图片点击弹出模态框效果</h2>
<p>图片模态框很不错，是个值得学习的效果</p>
<img src="star.jpeg" id="real" alt="model test picture">模态框部分的HTML结构代码如下：
<div class="motai" id="mo">
<span class="close" id="close">×</span>
<img class="motaiimg" id="moimg">
<div id="caption"></div>
</div>CSS样式设置
三、CSS样式设置
我们需要通过CSS定义模态框及其内部元素的外观，并默认将其隐藏。具体步骤包括以下几个方面：
1. 模态框容器样式
#mo{
display: none;/*隐藏模态框*/
width: 100%;
height: 100%;
position: fixed;/*定位方式为固定定位*/
overflow: auto;/*不滚动*/
background-color: rgba(0,0,0,0.7);
top: 0px;
left: 0px;
z-index: 1;/*置于页面图层之上*/
}2. 关闭按钮样式
.close{
font-size: 40px;
font-weight: bold;
position: absolute;
top: 20px;
right: 14%;
color:#f1f1f1;
}
.close:hover,
.close:focus{
color:#bbb;
cursor:pointer;
}3. 模态框内图片样式
#moimg{
display: block;/*图片表现为块*/
margin:25px auto;/*图片居中对齐*/
width: 60%;
max-width: 750px;/*自适应布局*/
}4. 图片标题样式
#caption{
text-align: center;/*文本居中*/
margin: 15px auto;
width: 60%;
max-height: 750px;
font-size: 20px;
color:#ccc;
}以上是构成模态框各元素的基础CSS代码。若希望实现点击图片后逐渐放大的动画效果，可以补充以下关键帧动画代码：
#moimg,#caption{
-webkit-animation: first 1s;
-o-animation: first 1s;
animation: first 1s;
}
@keyframes first{
from{transform: scale(0.1);}
to{transform: scale(1);}
}完成上述步骤后，模态框的页面结构便已搭建完毕，接下来只需使用JavaScript添加交互逻辑即可。
JavaScript交互逻辑
四、JavaScript交互逻辑
JavaScript代码主要负责处理图片和关闭按钮的点击事件。需要注意的是，JS脚本必须放置在模态框的HTML代码之后，以确保能够正确获取DOM元素。具体代码如下：
var motai=document.getElementById('mo')
var moimg=document.getElementById("moimg")
var realimg=document.getElementById("real")
var caption=document.getElementById("caption")
realimg.onclick=function(){
motai.style.display="block"
moimg.src=this.src
caption.innerHTML=this.alt
}
var span=document.getElementById("close");
span.onclick=function(){
motai.style.display="none";
}通过上述步骤，图片点击弹出模态框的功能便已实现。
以下是完整的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>close</title>
<style>
#real{
/*点击弹出模态框的图片*/
margin: 30px;
width: 250px;
border-radius:6px;
}
#real:hover{
opacity: 0.6;
}
#mo{
display: none;/*隐藏*/
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
background-color: rgba(0,0,0,0.7);
top: 0px;
left: 0px;
z-index: 1;
}
#moimg{
display: block;
margin:25px auto;
width: 60%;
max-width: 750px;
}
#caption{
text-align: center;
margin: 15px auto;
width: 60%;
max-height: 750px;
font-size: 20px;
color:#ccc;
}
#moimg,#caption{
-webkit-animation: first 1s;
-o-animation: first 1s;
animation: first 1s;
}
@keyframes first{
from{transform: scale(0.1);}
to{transform: scale(1);}
}
.close{
font-size: 40px;
font-weight: bold;
position: absolute;
top: 20px;
right: 14%;
color:#f1f1f1;
}
.close:hover,
.close:focus{
color:#bbb;
cursor:pointer;
}
@media only screen and(max-width:750px ) {
#moimg{
width: 100%;
}
}
</style>
</head>
<body>
<h2>图片点击弹出模态框效果</h2>
<p>图片模态框很不错，是个值得学习的效果</p>
<img src="star.jpeg" id="real" alt="model test picture">
<!--图片模态框 -->
<div class="motai" id="mo">
<span class="close" id="close">×</span>
<img class="motaiimg" id="moimg">
<div id="caption"></div>
</div>
<script>
var motai=document.getElementById('mo')
var moimg=document.getElementById("moimg")
var realimg=document.getElementById("real")
var caption=document.getElementById("caption")
realimg.onclick=function(){
motai.style.display="block"
moimg.src=this.src
caption.innerHTML=this.alt
}
var span=document.getElementById("close");
span.onclick=function(){
motai.style.display="none";
}
</script>
</body>
</html>以上介绍了使用纯JavaScript实现图片点击后出现模态框效果的完整过程，希望能为读者提供帮助。如有任何疑问，欢迎留言交流，作者会及时回复。感谢大家对本站的支持！