<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
/*
弹窗大框css 请注意写法。
position: fixed; 这个很重要，有了它。弹窗就会全屏。
background-color: rgb(0, 0, 0); 背景色的过渡效果，请注意。
*/
#myimg {
width: 20%;
height: 20%;
opacity: 1.0;
filter: alpha(opacity=100);
}
#myimg:hover {
opacity: 0.4;
filter: alpha(opacity=40);
/* 适用 IE8 及其更早版本 */
}
#tc {
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 */
}
span {
float: right;
color: #FFFFFF;
}
span:hover {
background-color: #BBBBBB;
}
#dtimg {
width: 50%;
height: 50%;
}
#tc {
margin: auto;
text-align: center;
}
#ms {
color: #FFFFFF;
}
</style>
<img id="myimg" class="cmyimg" src="https://c.runoob.com/wp-content/uploads/2017/01/btotbhpudiagtmvlkyrs.jpg"
alt="图片图片图片图片图片图片" />
<div id="tc">
<span>关闭</span>
<div id="dt">
<img id="dtimg" />
</div>
<div id="ms">
</div>
</div>
<script>
/* 1，点图弹出 #tc div
2，点关闭 关闭这个 div 全屏
3,要注意，html img中，设置 图片的src 可以直接这样写。 dtimg.src = this.src;
*/
var myimg = document.getElementById('myimg');
var tc = document.getElementById('tc');
var dtimg = document.getElementById('dtimg');
var gb = document.getElementsByTagName('span');
var ms = document.getElementById('ms');
myimg.onclick = function() {
tc.style.display = 'block';
dtimg.src = this.src;
dtimg.alt = this.alt;
ms.innerHTML = this.alt;
}
gb.onclick=function (){
tc.style.display = 'none';
}
</script>
</body>
</html>