바닐라 자바스크립트 모달 팝업

오늘 우리는 쉽게 자체 제작할 수 있는 또 다른 유명한 플러그인을 살펴볼 것입니다.
라이트박스/모달 기능인데, 버튼을 클릭하거나 콘텐츠와 함께 팝업을 링크하거나 이미지가 나타납니다.

간단한 CSS 및 JavaScript 로 쉽게 만들 수 있습니다.

HTML 구조

<div class="container">
  <a data-modal="modal-one">Open Modal</a>
</div>

<div class="modal" id="modal-one">
  <div class="modal-bg modal-exit"></div>
  <div class="modal-container">
    <h1>Amazing Modal</h1>
    <h2>Pure Vanilla JavaScript</h2>
    <button class="modal-close modal-exit">X</button>
  </div>
</div>

HTML의 경우 모달 버튼만 표시되고 모달은 구조 아래에 있습니다.

CSS 모달

CSS는 실제로 우리의 주요 초점은 아니지만 살펴보겠습니다.

.modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  &.open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  &-bg {
    position: absolute;
    background: teal;
    width: 100%;
    height: 100%;
  }
  &-container {
    border-radius: 10px;
    background: #fff;
    position: relative;
    padding: 30px;
  }
  &-close {
    position: absolute;
    right: 15px;
    top: 15px;
    outline: none;
    appearance: none;
    color: red;
    background: none;
    border: 0px;
    font-weight: bold;
    cursor: pointer;
  }
}

보시다시피 화려하지 않고 기본적인 스타일입니다. 언급할 가치가 있는 유일한 것은 모달이 기본적으로 표시되지 않고 불투명도가 0이라는 것입니다.
공개 클래스를 받으면 가시성을 설정하고 완전히 불투명하게 만듭니다.

JavaScript 모달 팝업

가장 놀라운 부분은 JavaScript입니다!

var modals = document.querySelectorAll('[data-modal]');

modals.forEach(function(trigger) {
  trigger.addEventListener('click', function(event) {
    event.preventDefault();
    var modal = document.getElementById(trigger.dataset.modal);
    modal.classList.add('open');
    var exits = modal.querySelectorAll('.modal-exit');
    exits.forEach(function(exit) {
      exit.addEventListener('click', function(event) {
        event.preventDefault();
        modal.classList.remove('open');
      });
    });
  });
});

따라서 우리가 하는 일은 모든 data-modal 속성 요소를 선택하고 반복하는 것입니다. 이들은 트리거이므로 eventListener를 추가해야 합니다.
클릭하면 데이터 세트를 기반으로 모달을 찾고 여기에 공개 클래스를 추가합니다.
그런 다음 모달 내의 모든 모달 종료 클래스를 검색합니다.
배경과 십자 버튼입니다.

이제 원하는 대로 사용자 정의하고 스타일을 지정할 수 있는 간단한 팝업이 표시되며, 큰 자바스크립트 라이브러리도 없고 이해하지 못하는 이상한 코드도 없습니다.

Note: This code is not accessible, but showcases the JavaScript part, to make it accessible you can use a plugin like Details Dialog

다음 Codepen에서 이 예제를 볼 수 있습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는