Modal 화면 구현 (Modal 외부 클릭 시 Modal 꺼짐)

모달창을 구현하는데 있어서 뒤에 화면을 뿌옇게 하고, 모달창의 바깥을 클릭 시 모달창이 꺼지는 기능을 구현하였다.

기본적인 구현 아이디어는, 기존의 화면을 전부 덮어버리는 투명한 요소를 만들고, 이 요소 위에 Modal을 구현하는 것이다.

바깥의 투명한 화면을 클릭하면, 모달창이 꺼지게 만들며 Modal 내부에 닫기 버튼을 만들 수도 있다.

 

Tailwindcss를 사용한 구현

import React from 'react';

export default function Modal({ setIsShow }: { setIsShow: () => void }) {
  return (
    <>
      <div
        className="absolute top-0 left-0 w-full h-full bg-slate-400 opacity-50"
        onClick={setIsShow}
      ></div>
      <div className="absolute top-40 m-auto bg-slate-50 p-16 m-4">
        <p>Modal Context</p>
        <button className="border-2 p-4 m-4 hover:bg-sky-700" onClick={setIsShow}>
          close
        </button>
      </div>
    </>
  )
}

 

Css를 이용한 기본 구현

가장 기본적인 css를 사용해서도 구현하였다.

역시 미래에 참고하기 위해서는 기본이 제일 좋은 것 같다.

<div>
  <div>
    <h1>Hello World</h1>
    <button class="show-button">Show Modal</button>
  </div>
  <!--  Modal  -->
  <div id="cover-div"></div>
  <div id="modal-div">
    <p>Modal Content</p>
    <button class="modal-button">close</button>
  </div>
  <!--  Modal  -->
</div>

일단 다음과 같은 HTML을 구성한다.

바깥의 show button으로 모달창을 띄우고, 모달창 내부 close button이나 모달창 바깥의 영역을 클릭 시 모달창을 닫게 한다.

#cover-div {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ddd;
  opacity: 0.5;
}

#modal-div {
  display: none;
  position: absolute;
  top: 45%;
  left: 45%;
  background-color: yellowgreen;
  padding: 16px;
  margin: 16px;
}

CSS를 통해서 cover-div가 화면 전체를 가리고 반투명하게 한다.

그리고 모달과 커버 영역은 보이지 않게 display 설정을 none으로 한다.

const coverDiv = document.querySelector('#cover-div');
const modalDiv = document.querySelector('#modal-div');

const showBtn = document.querySelector('.show-button');
const modalBtn = document.querySelector('.modal-button');

showBtn.addEventListener("click", () => {
  coverDiv.style.display = "block";
  modalDiv.style.display = "block";
});

modalBtn.addEventListener("click", () => {
  coverDiv.style.display = "none";
  modalDiv.style.display = "none";
});

// 바깥 클릭 시 모달창 닫기
coverDiv.addEventListener("click", () => {
  coverDiv.style.display = "none";
  modalDiv.style.display = "none";
});

마지막으로 적절하게 addEventListener를 사용하여 버튼과 cover-div에 이벤트를 연결한다.

 

위와 같이 모달창을 기본 HTML, Css, Javascript만으로 구현할 수 있다.