ImagePopup

Description

contents 내부의 Image 클릭 시, 전체 크기의 이미지를 볼 수 있는 팝업을 띄움.

Required

none.

Source

View

path: quartz/components/custom/ImagePopup.tsx

ImagePopup.tsx

// @ts-ignore  
import script from "./scripts/imagePopup.inline"  
import style from "./styles/imagePopup.scss"  
import { QuartzComponent, QuartzComponentConstructor } from "./types"  
  
const ImagePopup: QuartzComponent = () => {  
  return (  
    <div id="image-popup" className="popup">  
      <span className="close">&times;</span>  
      <img className="popup-content" id="popup-img" />  
    </div>  
  )}  
ImagePopup.afterDOMLoaded = script  
ImagePopup.css = style  
  
export default (() => ImagePopup) satisfies QuartzComponentConstructor

JS

path:quartz/components/script/custom/imagePopup.inline.ts

imagePopup.inline.ts

document.addEventListener("nav", () => {  
  const popup = document.getElementById("image-popup");  
  const popupImg = document.getElementById("popup-img");  
  const closeBtn = document.querySelector(".close");  
  
  if (!popup || !popupImg || !closeBtn) return  
  
  document.querySelectorAll("img").forEach((img) => {  
    img.addEventListener("click", () => {  
      popup.style.display = "flex";  
      // @ts-ignore  
      popupImg.src = img.src;  
    });  
  });  
  
  document.addEventListener("keydown", (event) => {  
    if (event.key === "Escape" && popup.style.display === "flex") {  
      popup.style.display = "none";  
    }  
  });  
  
  closeBtn.addEventListener("click", () => {  
    popup.style.display = "none";  
  });  
  
  popup.addEventListener("click", (event) => {  
    if (event.target === popup) {  
      popup.style.display = "none";  
    }  
  });  
})

CSS

path:quartz/components/styles/custom/imagePopup.scss

imagePopup.scss

.popup {  
  display: none;  
  position: fixed;  
  z-index: 1000;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  background-color: rgba(0, 0, 0, 0.8);  
  justify-content: center;  
  align-items: center;  
}  
  
.popup-content {  
  width: 60%;  
  height: 60%;  
  object-fit: fill;  
  display: block;  
  margin: auto;  
}  
  
.popup-content:hover {  
  cursor: default;  
}  
  
.close {  
  position: absolute;  
  top: 20px;  
  right: 30px;  
  font-size: 40px;  
  font-weight: bold;  
  color: white;  
  cursor: pointer;  
}