Menu Slider & Modal (5) - Toggle

본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다.

https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 

20 Web Projects With Vanilla JavaScript

 

 

 

const toggle = document.getElementById('toggle');
const close = document.getElementById('close');
const open = document.getElementById('open');
const modal = document.getElementById('modal');

 

DOM elements 다 받아온다

 

 

// Toggle nav
toggle.addEventListener('click', () =>
  document.body.classList.toggle('show-nav')
);

toggle 버튼을 누르면 body에 show-nav 클래스가 들어간다.

 

 

body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  transition: transform 0.3s ease;
}

body.show-nav {
  /* Width of nav */
  transform: translateX(200px);
}

 

 

stylesheet에 가서 

body에 show-nav 클래스가 추가 된 경우 스타일링을 준다.

transform: translateX(200px);을 줬는데

역시서 200px이 어디서 나온 것이냐 하면

 

 

nav {
  background-color: var(--primary-color);
  border-right: 2px solid rgba(200, 200, 200, 0.1);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  z-index: 100;
  transform: translateX(-100%);
}

nav의 원래 너비가 200px이다. 이것과 크기를 똑같이 넣어줘야 한다.

 

 

 

transform이 부드럽게 일어나기 위해 body에

transform이 일어날 경우 0.3초, speed-curve는 ease로 넣어준 것도 놓치지 말것.

 

 

---

 

// Show modal
open.addEventListener('click', () => modal.classList.add('show-modal'));

// Hide modal
close.addEventListener('click', () => modal.classList.remove('show-modal'));

 

(Sign Up 버튼을 open으로 받아왔고

modal에 있는 x버튼을 close로 받아왔다.)

Sign Up버튼을 누르거나 x 버튼을 누르면 modal에 show-modal이라는 클래스가 toggle 된다.

 

 

.modal-container.show-modal {
  display: block;
}

그래서 modal container에 show-modal 클래스가 추가되면

display:block이 되서 화면에 나오도록.

 

 

.modal {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  width: 400px;
  animation-name: modalopen;
  animation-duration: var(--modal-duration);
}

modal 창 자체에도 animation을 줬다.

animation-name은 modalopen으로

animation-duration에는 modal-duration을 줬는데

처음에 :root{} 에서 1초로 선언했었다.

 

 

@keyframes modalopen {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

 

그리고 keyframe을 만들어서 처음에는 opacity가 0(아예 안보임)

1초동안 선명해 지면서 마지막에는 opacity:1이 되서 온전히 modal창이 보이도록.

 

 

 

 

추가)

// Hide modal on outside click
window.addEventListener('click', e =>
  e.target == modal ? modal.classList.remove('show-modal') : false
);

x버튼을 눌렀을 때 뿐만 아니라 주변 화면을 클릭했을 때도 modal 창이 사라지게 하고 싶다면

window 자체에 eventlistener을 거는데

우선 클릭했을 때 target이 modal container이면 

modal container의 클래스 리스트에서 show-modal을 없애고

아니면 그냥 false를 return