[js] 자바스크립트 모달창(팝업창) 구현

 

자바스크립트를 이용하여
모달창(팝업창)을 만들겠습니다.

 

요즘에는 제이쿼리를 사용하지 않고,
순수한 자바스크립트, 바닐라 js를 이용한 기능 구현을 많이 합니다.

 

모달창 띄우기 구현내용

· 버튼 클릭시 모달창 open
· 모달창을 제외한 배경(background)는 어두운 검은 배경
· X 버튼 클릭시 모달창 close
· 검은 배경 클릭시 모달창 close

 

모달창(팝업창, 다이얼로그)창 띄우기 예제

html,  javascript

<button class="openBtn">모달창 open</button>
<div class="modal hidden">
  <div class="bg"></div>
  <div class="modalBox">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur quam nobis quis corrupti amet maxime neque, optio, in illo, voluptatibus consequuntur! Rerum quo ea nulla qui, maxime consectetur magni soluta!</p>
    <button class="closeBtn">✖</button>
  </div>
</div>

<script>
  const open = () => {
    document.querySelector(".modal").classList.remove("hidden");
  }

  const close = () => {
    document.querySelector(".modal").classList.add("hidden");
  }

  document.querySelector(".openBtn").addEventListener("click", open);
  document.querySelector(".closeBtn").addEventListener("click", close);
  document.querySelector(".bg").addEventListener("click", close);

</script>

 

css

        button {
          background-color: #F9B514;
          padding: 5px 10px;
          border-radius: 4px;
          cursor: pointer;
        }

        .modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .modal .bg {
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6);
        }

        .modalBox {
          position: absolute;
          background-color: #fff;
          width: 400px;
          height: 200px;
          padding: 15px;
        }

        .modalBox button {
          display: block;
          width: 80px;
          margin: 0 auto;
        }

        .hidden {
          display: none;
        }

 

한 번에 보기(Result 클릭)