kk Blog —— 通用基础


date [-d @int|str] [+%s|"+%F %T"]
netstat -ltunp
sar -n DEV 1

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%;
	}
}