3

JavaScript 图片弹窗

 2 years ago
source link: http://abcdxyzk.github.io/blog/2022/08/28/lang-web-img/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

JavaScript 图片弹窗

2022-08-28 20:59:00

https://c.runoob.com/codedemo/2266/

<!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>
// 获取弹窗
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";
}

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;

/* 触发弹窗图片的样式*/
#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: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%;
	}
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK