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

"本文主要介绍了如何使用纯JavaScript实现图片点击后弹出模态框的效果，包括模态框的实现思路、HTML结构、CSS样式以及JavaScript交互逻辑。" 在网页设计中，图片模态框是一种常见的功能，用户点击小图片后，大图会在一个覆盖全屏的浮窗中展示。这个效果可以通过各种JavaScript库来实现，例如bpopupJs，但为了更好地理解其工作原理，我们可以使用原生JavaScript编写代码。本文将详细介绍如何一步步创建这样一个功能。 首先，实现思路如下： 1. 模态框包含大图片、关闭按钮和图片标题三个部分。 2. 默认情况下，模态框是隐藏的。 3. 当用户点击小图片时，模态框显示，并显示相应的放大图片。 4. 点击关闭按钮时，模态框隐藏。 接着，我们需要构建HTML结构。原始页面中包含一个小图片，当点击该图片时触发模态框显示。HTML代码如下： ```html <h2>图片点击弹出模态框效果</h2> <p>图片模态框很不错，是个值得学习的效果</p> <img src="star.jpeg" id="real" alt="modeltestpicture"> ``` 模态框的HTML结构包括一个`<div>`容器，内含关闭按钮、图片和标题区域： ```html <div class="motai" id="mo"> <span class="close" id="close">×</span> <img class="motaiimg" id="moimg"> <div id="caption"></div> </div> ``` 接下来，我们需要CSS样式来控制模态框的外观和隐藏状态。以下是一些关键样式： ```css #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; /* 置于页面图层之上 */ } .close { font-size: 40px; font-weight: bold; position: absolute; top: 20px; right: 14%; color: #f1f1f1; } .close:hover, .close:focus { color: #bbb; cursor: pointer; } #moimg { display: block; /* 图片表现为块 */ margin: 25px auto; } ``` 最后，使用JavaScript实现点击小图片显示模态框和关闭按钮的功能： ```javascript document.getElementById('real').addEventListener('click', function() { var modal = document.getElementById('mo'); var img = document.getElementById('moimg'); var caption = document.getElementById('caption'); img.src = this.src; caption.innerHTML = this.alt; modal.style.display = "block"; }); document.getElementById('close').addEventListener('click', function() { var modal = document.getElementById('mo'); modal.style.display = "none"; }); ``` 这段JavaScript代码为小图片添加点击事件监听器，当点击时，将小图片的`src`和`alt`属性赋值给模态框中的大图和标题，然后显示模态框。同时，为关闭按钮添加点击事件监听器，点击时隐藏模态框。 总结来说，通过HTML、CSS和JavaScript的结合，我们可以实现一个简单的图片点击弹出模态框效果，无需依赖外部库。这种方式有助于理解前端交互的基本原理，并为开发者提供了自定义和扩展功能的基础。