JavaScript로 모달 윈도우를 구현하는 방법

17599 단어 CSSHTML5자바스크립트

모달 윈도우를 jQuery를 사용하지 않고 JavaScript에서만 구현



기억한 것을 비망록을 겸해 정리했습니다.

이번 구현하는 것은 간단히 설명하면, 「상세를 본다」버튼을 클릭하면, 디폴트로 붙이고 있는 hidden 클래스가 제외되어 모달과 마스크가 출현해, 「닫기」버튼 또는, 주위의 마스크를 클릭해 그러면, hidden 클래스가 붙어 모달이 닫는 사양이 되고 있습니다.

조속히 병아리 파일을 만들어 갑니다.

출처



HTML



index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>モーダル</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="open">
    詳細をみる
  </div>
  <div id="mask"></div>
  <section id="modal">
    <p>これは簡単なモーダルウィンドウです。</p>
    <div id="close">
      閉じる
    </div>
  </section>
  <script src="script.js"></script>
</body>

</html>

자바 스크립트에서 html 요소를 얻기 위해 id를 검색합니다.

open은 모달 표시, mask는 모달 주위의 검은 배경, model은 모달, close는 닫기 버튼입니다.

CSS



style.css
body {
    font-size: 16px;
  }

  #open,
  #close {
    cursor: pointer;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    padding: 12px;
    margin: 16px auto 0;
    background: #4caf50;
    color: white;
  }

이제 한 번 전개해 봅시다.



이렇게 되면 일단 괜찮습니다.

다음으로 mask와 model의 css 만들어 갑니다.

마스크와 모달 CSS



style.css
#mask {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  color: #555;
  width: 300px;
  padding: 40px;
  border-radius: 4px;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
}

#modal p {
  margin: 0 0 20px;
}

mask는 position: fixed;와 rgba로 전체 화면을 검게 만듭니다.
modal과 #mask에 z-index를 설정하고 있습니다만, #mask는 #modal보다 아래에 오지 않으면, #modal까지 덮어 검게 되어 버리므로, #modal > #mask로 설정하고 있습니다.

이 시점에서 아래 화면과 같아야합니다.



마스크와 모달은 표준시에는 숨겨 두고 싶기 때문에, css를 이용해 보이지 않는 상태로 해 둡니다.

display: none; 및 transform: translate로 숨겨 둡니다.



index.html
<div id="mask" class="hidden"></div>
  <section id="modal" class="hidden">

style.css
#mask.hidden {
  display: none;
}

#modal.hidden {
  transform: translate(0, -500px);
}

html에서 “#mask와 #modal에 hidden 클래스를 명명하고 CSS로 숨깁니다.
mask는 display: none;로 보통 숨기고 있습니다만, 이번 모달은 위에서 표시시키고 싶기 때문에,
modal은 transform: translate(0,500px);로 500px 위에 숨겨 둡니다.



사라지면 JavaScript로 들어갑니다.

자바스크립트에서 마스크와 모달 조작



이번에는 "open을 클릭하면 #modal과 #mask의 hidden 클래스가 제거되어 표시한다"라는 설계이므로 open에 클릭 이벤트를 붙여 갑니다.

script.js
'use strict';
{
  const open = document.getElementById('open');
  const close = document.getElementById('close');
  const modal = document.getElementById('modal');
  const mask = document.getElementById('mask');

  open.addEventListener('click', function () {
    modal.classList.remove('hidden');
    mask.classList.remove('hidden');
  });
}

이제 "자세히보기"를 클릭하면 모달과 마스크 hidden 클래스가 제거되고 표시되는 것을 볼 수 있습니다.
하지만 다시 숨길 수 없기 때문에 이번에는 hidden 클래스를 다시 클릭하여 부여 할 수 있습니다.
또한 마스크 부분을 눌러도 숨길 수있는 것이 사용 편의성도 자연이므로 마스크에도 클릭 이벤트를 적용합니다.

script.js
'use strict';
{
  const open = document.getElementById('open');
  const close = document.getElementById('close');
  const modal = document.getElementById('modal');
  const mask = document.getElementById('mask');

  open.addEventListener('click', function () {
    modal.classList.remove('hidden');
    mask.classList.remove('hidden');
  });
  close.addEventListener('click', function () {
    modal.classList.add('hidden');
    mask.classList.add('hidden');
  });
  mask.addEventListener('click', function () {
    modal.classList.add('hidden');
    mask.classList.add('hidden');
  });
}

마지막으로 애니메이션을



모달을 위에서 멀리 표시하기 위해 transition을 추가하여 할 수 있습니다. 즉시 할 수 있습니다.

style.css
#modal {
  background: #fff;
  color: #555;
  width: 300px;
  padding: 40px;
  border-radius: 4px;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
  transition: 0.4s;
}

modal에 transition을 추가하기만 하면 됩니다.
이것으로 완성입니다.

찾아 주셔서 감사합니다.
Chakra-UI 시작하기
단 5분 만에 백그라운드 체인저를 구축하는 방법을 배우십시오.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage