纯JS实现图片点击弹出模态框效果
82 浏览量
更新于2024-08-30
收藏 122KB PDF 举报
"本文主要介绍了如何使用纯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的结合,我们可以实现一个简单的图片点击弹出模态框效果,无需依赖外部库。这种方式有助于理解前端交互的基本原理,并为开发者提供了自定义和扩展功能的基础。
2020-10-24 上传
2020-10-17 上传
2021-08-07 上传
点击了解资源详情
2020-11-19 上传
2021-07-28 上传
2022-11-07 上传
2023-09-27 上传
weixin_38689191
- 粉丝: 5
- 资源: 956
最新资源
- 新代数控API接口实现CNC数据采集技术解析
- Java版Window任务管理器的设计与实现
- 响应式网页模板及前端源码合集:HTML、CSS、JS与H5
- 可爱贪吃蛇动画特效的Canvas实现教程
- 微信小程序婚礼邀请函教程
- SOCR UCLA WebGis修改:整合世界银行数据
- BUPT计网课程设计:实现具有中继转发功能的DNS服务器
- C# Winform记事本工具开发教程与功能介绍
- 移动端自适应H5网页模板与前端源码包
- Logadm日志管理工具:创建与删除日志条目的详细指南
- 双日记微信小程序开源项目-百度地图集成
- ThreeJS天空盒素材集锦 35+ 优质效果
- 百度地图Java源码深度解析:GoogleDapper中文翻译与应用
- Linux系统调查工具:BashScripts脚本集合
- Kubernetes v1.20 完整二进制安装指南与脚本
- 百度地图开发java源码-KSYMediaPlayerKit_Android库更新与使用说明