[image] CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)

이미지 모달 효과

 

<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">&times;</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) : 이목 집중 위한 팝업처럼 띄우는 화면전환 효과