当前位置：首页 > 全部内容 > 纯JavaScript实现图片点击弹出模态框

纯JavaScript实现图片点击弹出模态框

作者：白露时间：2026-10-22 03:46:53浏览：649

本文介绍如何使用纯JavaScript和CSS实现点击图片后弹出模态框的效果。通过HTML结构搭建、CSS样式设置以及JS事件监听，无需依赖第三方库即可实现图片放大显示与关闭功能，并包含简单的缩放动画效果。

纯JavaScript实现图片点击弹出模态框

在浏览网页图片时，经常可以看到点击图片后，原图会放大并浮现在页面中央，覆盖整个窗口，这种交互效果被称为图片模态框。

虽然可以使用如bpopupJs等JavaScript库来快速实现该功能，但为了深入理解其底层原理和具体实现逻辑，本文将演示如何仅使用原生JavaScript来完成这一效果。

实现思路

一、实现思路

当用户点击缩略图时，需要触发模态框的显示，同时模态框内部应包含放大的图片、一个用于关闭模态框的按钮以及图片的标题说明。

基于上述需求，实现该效果的核心逻辑如下：

模态框的结构由三部分组成：用于展示的大图片、关闭按钮以及图片标题区域。

初始状态下，模态框处于隐藏状态；当用户点击页面上的小图片时，通过JavaScript控制模态框变为可见。

当用户点击模态框内的关闭按钮时，通过JavaScript将模态框重新设置为隐藏状态。

HTML代码结构

二、HTML代码结构

首先，在原始页面中放置一张供点击的图片，示例如下：

纯JavaScript实现图片点击弹出模态框

对应的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";
 }

通过上述步骤，图片点击弹出模态框的功能便已实现。

纯JavaScript实现图片点击弹出模态框

以下是完整的代码示例：


<!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实现图片点击后出现模态框效果的完整过程，希望能为读者提供帮助。如有任何疑问，欢迎留言交流，作者会及时回复。感谢大家对本站的支持！

作者最新文章

AOS.js 动画不触发怎么办？排查 DOM 加载与移动端兼容问题

2026-11-05 17:02:26

sigma.js 怎么实现节点点击、拖拽与悬停提示交互

2026-11-05 15:03:27

Matter.js 与 PixiJS/Three.js 集成：分离物理计算与渲染

2026-11-05 13:43:48

主流JS弹幕库选型指南：Danmaku.js等库的功能与体积对比

2026-11-05 09:28:19

JavaScript点击事件监听与交互效果实例

2026-11-05 09:10:19