图片弹窗
Posted JackySei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片弹窗相关的知识，希望对你有一定的参考价值。
效果如图
<!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>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<img class = "img1" src="pic.jpg" alt="图片信息" οnclick="showPop()">
<div class="myPop">
<span class="close" onclick="closePop()">×</span>
<img class="pop">
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
}
.img1{
width: 300px;
height: 200px;
}
.myPop{
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.pop{
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.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;
}
.img1:hover{
opacity: 0.7;
}
/* 添加动画 */
.pop {
-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)}
}
function showPop(){
var img=document.querySelector(".pop");
img.src="pic.jpg";
var myModel=document.querySelector(".myPop");
myModel.style.display='block';
}
function closePop(){
var myModel=document.querySelector(".myPop");
myModel.style.display='none';
}
以上是关于图片弹窗的主要内容，如果未能解决你的问题，请参考以下文章
百度编辑器 Ueditor 上传图片时打开文件夹的延迟问题，点击上传图片弹窗打开慢问题