#1 버튼 눌러서 Modal창 열고 닫기

2020. 5. 11. 16:25ㆍJavascript/응용

 1. 완성본

  이번 강의에서 만들 모달 창 영상입니다.

 

2. HTML 구조 짜기

구조를 짜기전에 내가 어떻게 설계할 것인지에 대하여 스케치를 해보는 것이 중요하다고 생각합니다.

 

지금처럼 간단한 프로젝트의 경우, 머릿 속으로 짜는 것도 중요하지만, 직접 그려보는 것은 더 중요하다고 생각해요.

 

그래서 저는 모달창 구현을 위해 다음과 같이 스케치를 해보았습니다.

 

 

그림을 보시면 ① BODY와 ② MODAL 이라는 구역으로 나뉘어져 있다는 것을 알 수 있습니다.

 

BODY는 HTML을 조금이라도 공부하셨으면, 어떤 것을 의미하는지 아실겁니다. 

 

결론적으로 MODAL은 BODY안에 수평 수직으로 가운데 정렬이 되어있고, 각각 스위치를 하나씩 가지고 있다는 것을 알 수 있습니다(BODY는 OPEN이라는 스위치를 가지고 있고, MODAL은 CLOSE라는 스위치를 가지고 있음).

 

그래서 이 스케치는 다음과 같은 코드로 나타낼 수 있습니다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
  
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <title>Document</title>
    
  </head>
  <body>
  
    <button class="open"">OPEN</button>
    
    <div class="modal">
      <button class="modal__closeBtn">CLOSE</button>
    </div>
    
  </body>
</html>

 

3. CSS 입히기

이제 HTML 구조를 짜셨으니, 디자인을 입힐 때가 됐습니다. 그림을 다시 가져와보면

 

 

 

BODY안에 OPEN 스위치와 MODAL이 수평 수직으로 가운데 정렬이 되어있습니다. 수평 수직으로 가운데 정렬하는 방법은 여러가지가 있지만, 저는 display: flex, justify-content, align-items라는 문법을 이용하려고 합니다. 

 

이 세개를 다음과 같이 써주면,

html, body{
    height: 100%; // 높이를 설정해주지 않으면, 수직으로 가운데 정렬이 되지 않습니다. 
}

body{ 
    display: flex;  
    justify-content: center;  
    align-items: center;
}

.modal{ //.modal은 class를 나타냅니다. 
   width: 300px; //폭을 300px로 설정
   height: 300px;  //높이를 300px로 설정
   
   //modal 안에 CLOSE 버튼을 수평, 수직으로 가운데 정렬을 시켜줄 겁니다.
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: yellow; 
}

수평 수직으로 가운데 정렬이 될겁니다. 

 

그런데, 이렇게 코드를 써주시면 다음과 같은 문제가 발생할 겁니다.

 

 

 

이를 해결하기 위해

 

Modal 창을 독립시켜줘야합니다.   position: absolute 를 이용해서 말이죠!

 

CSS의 .modal 첫 부분에 다음 코드를 입력해줍시다.

 

  position: absolute;

 

그러면

 

 

다음과 같이 Modal 창이 open버튼 위에 올라가게됩니다.

 

이제, 전체적인 디자인이 끝났으니 자바스크립트를 이용하여 동적인 움직임을 입히도록 하겠습니다!

 

4. 자바스크립트

 이제 동작을 구현할 때가 됐습니다.

 

우리가 구현하려는 동작은 다음과 같습니다.

 

1. 홈페이지 접속

2. OPEN버튼 누름

3. Modal 창 디스플레이

4. CLOSE버튼 누름

5. Modal 창 사라짐

 

이 과정을 정리하면 다음과 같습니다.

 

더보기

Modal 창은 OPEN 버튼을 눌러야 디스플레이 되고[처음부터 Modal창을 디스플레이해서는 안된다!],

CLOSE버튼을 누르면 Modal 창은 원 상태[숨겨진 상태]로 돌아간다

 

즉, 우리는 Modal창을 숨겼다가 보여줄 수 있어야합니다.

 

그러기 위해서 우선, 우리는 html과 css를 이용해서 Modal 창을 숨겨줘야합니다.

 

<!-- 모달 창에 hidden이라는 클래스 이름을 부여하고 -->
<div class = "modal hidden"></div>

 

// CSS 마지막 태그에 hidden 클래스를 가지고 있는 태그가 있으면
// 화면에 표시되지 않도록 display: none을 해줍니다.

.hidden{
	display: none;
}

 

이렇게 코드를 짜시면, Modal창은 숨겨질 겁니다. 그리고 다음과 같이 자바스크립트를 타이핑합니다.

 

const open = document.querySelector(".open");
const close = document.querySelector(".modal__closeBtn");
const modal = document.querySelector(".modal");

function init() {
  open.addEventListener("click", function () {
    modal.classList.remove("hidden");
    //OPEN버튼을 누르면 hidden이라는 클래스가 있으면 없앤다.
  });
  close.addEventListener("click", function () {
    modal.classList.add("hidden");
  });//CLOSE버튼을 누르면 hidden이라는 클래스를 추가한다.
}

init(); //함수 실행!

 

이렇게 작성해주시고 JS코드를 추가해주시면, Modal 창을 열고 닫을 수가 있습니다.

 

마지막으로 전체 코드를 공개하겠습니다.

 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button class="open" id="jsBtn">OPEN</button>
    <div class="modal hidden" id="jsModal">
      <button class="modal__closeBtn" id="jsCloseBtn">CLOSE</button>
    </div>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

 

CSS

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  width: 100px;
  height: 25px;
  background-color: #2ecc71;
  color: white;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 20px;
}

button:focus {
  outline: none;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.modal {
  position: absolute;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.27), 0 2px 8px rgba(0, 0, 0, 0.7);
}

.modal .modal__closeBtn {
  background-color: #3498db;
}

.hidden {
  display: none;
}

 

JS

const open = document.querySelector(".open");
const close = document.querySelector(".modal__closeBtn");
const modal = document.querySelector(".modal");

function init() {
  open.addEventListener("click", function () {
    modal.classList.remove("hidden");
    //hidden이라는 클래스가 있으면 없앤다.
  });
  close.addEventListener("click", function () {
    modal.classList.add("hidden");
  });
}

init(); //함수 실행!

'Javascript > 응용' 카테고리의 다른 글

[NOJS] 3D 캐러셀 슬라이드 만들기  (0) 2020.12.13
[JS] 반응형 네비게이션 바 만들기  (2) 2020.06.16
[JS] 계산기 만들기  (0) 2020.06.14
[JS] 자바스크립트로 아날로그 시계 만들기  (0) 2020.06.07
#2 마우스오버 이벤트를 이용하여 메뉴 슬라이더를 만들어보자.  (0) 2020.05.14

관련글

티스토리툴바