<style>
#basicImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
width:100%;
max-width:300px
}
#basicImg:hover {opacity: 0.7;}
/* 모달 (배경) */
.modalBox {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0); /* 예비색 */
background-color: rgba(0,0,0,0.9); /* 기본색 */
}
/* 모달 내용(이미지) */
.modalImg {
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;
}
/* 애니메이션 효과 */
.modalImg, #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)}
}
/* 모달 닫기 버튼 */
.closeBtn {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.closeBtn:hover,
.closeBtn:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 작은 기기 경우, 이미지 너비 100% 설정 */
@media only screen and (max-width: 700px){
.modalImg {
width: 100%;
}
}
</style>
<img id="basicImg" src="https://source.unsplash.com/random" alt="랜덤이미지">
<!-- 모달 박스 -->
<div id="modalBox" class="modalBox">
<span class="closeBtn">×</span>
<img class="modalImg" id="modalImg">
<div id="caption"></div>
</div>
<script>
// 요소 얻기
var modalBox = document.getElementById("modalBox");
var basicImg = document.getElementById("basicImg");
var modalImg = document.getElementById("modalImg");
var caption = document.getElementById("caption");
// 이미지를 모달에 넣기 (alt 텍스트를 캡션으로 사용)
basicImg.onclick = function(){
modalBox.style.display = "block";
modalImg.src = this.src;
caption.innerHTML = this.alt;
}
// 모달 닫기 버튼
var closeBtn = document.getElementsByClassName("closeBtn")[0];
// 모달 닫기 버튼 클릭 시, 모달 닫기
closeBtn.onclick = function() {
modalBox.style.display = "none";
}
// 모달 클릭 시, 모달 닫기
modalBox.onclick = function() {
modalBox.style.display = "none";
}
</script>
결과보기
PS. 모달 (Modal) : 이목 집중 위한 팝업처럼 띄우는 화면전환 효과
