.modal {
display: none; position: fixed; z-index: 1; left: 0;
top: 0;
width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content {
position: relative;
background-color: #fefefe;
margin: 30px auto;
padding: 0;
border: 1px solid #888;
width: 80%;
max-width: 732px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
} .close {
float: right;
position: relative;
z-index: 1;
margin: 15px 15px 0 0;
}
.close:hover, .close:focus {cursor: pointer;} .modal-body {
padding: 10px 10px 5px;
position: absolute;
background: white;
}
.modal-body img {width: 100%;} @keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}