目录
- 代码
- 效果
- 放大前
- 放大后
- 最后
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* 触发弹窗图片的样式 */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover { opacity: 0.7; } /* 弹窗背景 */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } /* 图片 */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* 文本内容 */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* 添加动画 */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from { -webkit-transform: scale(0) } to { -webkit-transform: scale(1) } } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } } /* 关闭按钮 */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 小屏幕中图片宽度为 100% */ @media only screen and (max-width: 700px) { .modal-content { width: 100%; } } </style> <body> <!-- 触发弹窗 - 图片改为你的图片地址 --> <img id="myImg" src="https://c.runoob.com/wp-content/uploads/2017/01/btotbhpudiagtmvlkyrs.jpg" alt="文本描述信息" width="300" height="200"> <!-- // 下面也可以直接获取页面内容赋值给弹窗内容 : 两种赋值文本方法 --> <!-- <span id="txtSpan">文本描述信息</span> --> <!-- 弹窗 --> <div id="myModal" class="modal"> <!-- 关闭按钮 --> <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span> <!-- 弹窗内容 --> <img class="modal-content" id="img01" src=""> <!-- 文本描述 --> <div id="caption"></div> </div> </body> <script> // 思路: 获取所有要用的 => 然后通过点击图片显示弹窗 => 赋值到弹窗里面 => 图片赋值 => 文本赋值 // 获取点击图片 var img = document.getElementById('myImg'); // 获取弹窗 var modal = document.getElementById('myModal'); // 弹窗图片 var contImg = document.getElementById('img01'); // 文本内容 var caption = document.getElementById('caption'); // 上面用图片alt图片也可以用图片赋值给弹窗内容 : 两种赋值文本方法 var txtSpan = document.getElementById('txtSpan'); img.onclick = function () { // console.log('111'); modal.style.display = 'block'; contImg.src = img.src // console.log(contImg.src,'srccc'); caption.innerHTML = img.alt // 下面也可以直接获取页面内容赋值给弹窗内容 : 两种赋值文本方法 // caption.innerHTML = txtSpan.innerHTML } // 点击x按钮关闭弹窗 var closeBox = document.getElementsByClassName('close')[0]; closeBox.onclick = function () { modal.style.display = 'none'; } </script> </html>
效果
放大前
放大后
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
