JavaScript 图片弹窗
https://c.runoob.com/codedemo/2266/
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片弹窗</title>
</head>
<body>
<!-- 触发弹窗 - 图片改为你的图片地址 -->
<img id="myImg" src="https://static.runoob.com/images/mix/69599048-B5F4-4F07-80F4-F73EC45C0054.png" alt="beautiful" width="300" height="200">
<!-- 弹窗 -->
<div id="myModal" class="modal">
<!-- 关闭按钮 -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- 弹窗内容 -->
<img class="modal-content" id="img01">
<!-- 文本描述 -->
<div id="caption"></div>
</div>
</body>
</html>
|
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| // 获取弹窗
var modal = document.getElementById('myModal');
//获取图片插入到弹窗
var img = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var captionText = document.getElementById("caption");
//获取<span>元素，设置关闭按钮
var span = document.getElementsByClassName("close")[0];
//当点击(x)，关闭弹窗
span.onclick=function(){
modal.style.display="none";
modalImg.src="";
}
img.onclick=function(){
modal.style.display="block";
modalImg.src=this.src;
captionText.innerHTML=this.alt;
}
modal.style.display="block";
modalImg.src=img.src;
captionText.innerHTML=img.alt;
|
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| /* 触发弹窗图片的样式*/
#myImg {
border-radius:5px;
cursor:pointer;
transition:0.3x;
}
#myImg:hover{
opacity:0.7;
}
/*弹窗背景*/
.modal{
display:none;
position:fixed;
z-index:1;
padding-top:100px;
left:0;
top:0;
//width:90%;
//height:90%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.9);
}
/*图片*/
.modal-content{
margin:auto;
display:block;
width:90%;
max-width:900px;
}
/*文本内容*/
#caption{
margin:auto;
display:block;
width:90%;
max-width:900px;
text-align:center;
color:#ccc;
padding:10px 0;
height:30px;
}
/*添加动画*/
.modal-content, #caption{
-webkit-animation-name:zoom;
-webkit-animation-duration:0.2s;
animation-name:zoom;
animation-duration:0.2s;
}
@-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:1px;
right:35px;
color:#f1f1f1;
font-size:50px;
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%;
}
}
|
