html再次点击,点击图片放大，再次点击还原（利用div简单效果）

测试dome

#modal {

display: none;

}

.modal {

margin: auto;

padding-top: 18%;

width: 50%;

height: 80%;

z-index: 1;

}

.modal img {

animation-name: zoom;

animation-duration: 0.6s;

display: block;

padding: 10px;

margin: auto;

max-width: 100%;

max-height: 100%;

box-shadow: 0 2px 6px rgb(0, 0, 0, 0), 0 10px 20px rgb(0, 0, 0, 0);

border-radius: 12px;

border: 1px solid white;

}

@keyframes zoom {

from {transform: scale(0.1)}

to {transform: scale(1)}

}

.thum-img {

float: left;

width: 200px;

height: 200px;

margin: auto;

display: block;

padding: 40px;

}

var modal = document.getElementById('modal');

var modalw= document.getElementById('modalw');

var bgImg = document.getElementById('bgImg');

function showBgImg(e) {

modal.style.display = 'block';

modalw.style.display = 'block';

bgImg.src = e.src;

}

bgImg.onclick = function() {

modalw.style.display = 'none';

modal.style.display = 'none';

}