重點：在於彈出框的動畫
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片的模態框</title>
<style type="text/css">
.img1{cursor: pointer;border-radius: 5px;transition: 0.3s;}
.img1:hover{opacity: 0.7;}
.modal{display: none; position:fixed;z-index: 1;left:0;top:0;width: 100%;height: 100%;background: rgba(0,0,0,0.9);padding-top: 100px; text-align: center;}
.modal img{max-width: 700px;width: 80%;margin: 0 auto;}
.modal .close{position:absolute;top:15px;right: 35px;font-size: 40px;color: #fff;transition:0.3s; cursor: pointer;}
.modal .close:hover,.modal .close:focus{color: #bbb;}
.modal-body{animation-name: zoom;animation-duration: 0.6s;}
@keyframes zoom{
from{transform: scale(0.1);}
to{transition: scale(1);}
}
</style>
</head>
<body>
<img src="paris.jpg" alt="圖片" class="img1" id='img1'>
<div class="modal" id='myModal'>
<span class="close" id='close'>×</span>
<img class="modal-body" src='paris.jpg'></img>
<p>Northern Lights, Norway</p>
</div>
<script type="text/javascript">
document.getElementById('img1').οnclick=function() {
document.getElementById('myModal').style.display='block';
}
document.getElementById('close').οnclick=function(){
document.getElementById('myModal').style.display='none';
}
</script>
</body>
</html>