컴퓨터를 공부하고자 마음먹은지 N일차

[78일차][졸린새X코공]Part2-1 vanillaJS로 모달창 만들기 본문

📒Javascript

[78일차][졸린새X코공]Part2-1 vanillaJS로 모달창 만들기

졸린새 2020. 11. 26. 01:48
728x90

Solo week sprint Part2-1 modal

솔로위크를 더 알차게 보내기 위해
코드스테이츠 최강 듀오 지상, 상권 합쳐서 지상권이 자체 스프린트를 진행한다!

깃헙 레포지토리 : https://github.com/sleepybird96/solo-week-sprint-vanillaJS
코공(이상권)블로그 : https://velog.io/@rnrel11

모달창이란?

내가 자주 쓰는 사이트인 imgur 사이트를 예로 들어보자.

요런식으로 같은 형제 엘리먼트들보다 앞서 튀어나와, 자기역할을 하는 창이다.
비슷한 역할을 하는 친구가 있다.
바로 팝업창이다.

모달창과 팝업창의 차이

팝업창은 새로운 브라우저창 을 열어서 정보를 제공한다.

반면 모달창은 새로운 창이 아닌 숨어있던 엘리먼트를 보이게하는 방식
이다. 즉 다른 형제엘리먼트들과 겹칠경우 무시하고 가장 상위레이아웃을 가지게 된다

그러한 내장 메소드가 따로 있는것이냐? 노노
하지만 css로 가장 상위레이아웃을 줘버릴 수도있다.

모달창은 팝업차단의 영향을 안받는 반면
팝업창은 차단의 영향을 받는다
당장 나도 귀찮은 팝업을 싹다 차단해버린다.

그런데 만약, 서버점검 공지사항같은 이용자가 필수적으로 알아야 할 정보 를 전할 때
모달창은 매우 유용하다.
또한 쇼핑몰에서 시간임박과 같은 매우 강력한 마케팅 을 할 때도 유용하다

함께 서버 점검 메세지를 만들어 보자

모달창은 사실, 바닐라js에서 필수로 구현할줄 알아야 하는 기능 중,
난이도가 낮은편 에 속하는것 같다.
스크립트는 사실 어느순간에 보여야하고 사라져야 하는지 만 생각하면 된다.

HTML

보통은 모달창으로 지정해 줄 엘리먼트를
body의 가장 하단이나, 상단에 껴넣는다.
특정 엘리먼트 안에서 존재하는 모달창을 생각하고 싶다면 얘기는 다르다..!
일단 그 부분은 이 포스팅에서는 어드밴스드 하다.

우선 적당한 실습 페이지를 만들어본다. (그대로 복붙해도 무방하다)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>untitled</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
  <section>
    <h1>공각기동대</h1>
    <h2>고스트 인더셸</h2>
    <p>초고속 네트워크 사회,</br> 점점 더 지능화되고 흉포화 해지는 범죄에 대항하기 위해 </br>정부는 대장 쿠사나기를 필두로 </br>비공식 사이보그 부대를 결성하여 공안 9과 ‘공각기동대’를 탄생시킨다.</br> 어느 날, 각국의 정보망으로부터 네트워크를 중심으로 출몰하며 </br>주가조작, 정보조작, 정치공작, 테러 등의 죄목으로</br> 국제수배중인 인물 통칭’인형사’가 일본에 나타났다는 경고가 ‘공각기동대’로 날아든다.</br> 쿠사나기는 정체불명의 해커’인형사’를 제거하기 위해 임무에 뛰어든다.</p>
    <ul>
      <li><strong>개봉일</strong>: 1995년 11월 18일 (일본)</li>
      <li><strong>감독</strong>: 오시이 마모루</li>
      <li><strong>원작</strong>: 공각기동대</li>
      <li><strong>원작자</strong>: 시로마사무네</li>
      <li><strong>흥행수익</strong>: 230만 달러</li>
    </ul>
    <img src="https://i.imgur.com/aAVFqtf.jpg" width="60%">
    <img src="https://i.imgur.com/x8gmzhj.png" width='60%'>
    <img src="https://i.imgur.com/WCPoFha.png" width='60%'>
    <img src="https://i.imgur.com/sXGh98L.png" width='60%'>
    <img src="https://i.imgur.com/nyf3488.png" width='60%'>
    <footer>&copy; sleepybird96 : gsang2</footer>
  </section>
 
  <!--공지사항이 노출될 창이다.-->
  <div id='notice'>
    <div id= 'noticeContents'>
      <h2>오후2시 ~오후6시 서버점검</h2>
      <div id = 'notice'>서버점검이 2시부터 시작해서 오후 6시까지 있습니다.</br>서비스 이용에 착오 없으시길 바랍니다.</div>
      <button id='closeNoticeBtn'>확인</button>
    </div>
  </div>
 
  <!--공지사항 확인이라는 버튼을 위치 고정값을 줘서 항상 나타나게 한다.-->
  <div id='showNoticeBtn'>공지사항확인</div>
 
  <!--공지사항이 떴을 시 주변 화면이 어두워지게 하는 역할을 한다.-->
  <div id='noticeBackground'></div>
  <script src="script.js"></script>
</body>
</html>
cs

html KEY point

모달창을 포함하는 html을 구상할 때 중요한것은
어느 요소에서 유효한 모달창 을 만들 지 생각해보는것이다.
내가 지금 만들려는 모달창 같은 경우에는 서버점검 과 같은
사용 유저에게 중요한 정보 이기 때문에 유효범위를 body로 하기위해
부모를 body로 둔것이다
보너스로 어떤 사이트를 보면 항상 우측 하단에 관리자와 대화할 수 있는
메신저를 본적 있는가? 그것 또한 만들려고 한다.

css

모달창의 가장 중요한 부분이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
section {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
#showNoticeBtn {
  display: grid;
  place-items: center;
  background-color: cornflowerblue;
  height: 7rem;
  width: 7rem;
  border-radius: 100%;
  border: 2px solid blue;
  position: fixed;
  right: 3%;
  bottom: 10%;
}
#noticeContents {
  z-index: 1;
  display: block;
  position: fixed;
  top: 35%;
  left: 20%;
  height: 30%;
  width: 60%;
  background-color:  white;
  border : 2px solid black;
}
#notice {
  display: flex;
  background-color: white;
  flex-direction: column;
  text-align: center;
  height: 100%;
  width: 100%;
}
h2 {
  text-align: center;
  width: 100%;
  color: blue;
}
#notice {
  height: 40%;
  display: grid;
  place-items: center;
}
#closeNoticeBtn {
  position: absolute;
  background-color: cornflowerblue;
  height: 12%;
  width: 12%;
  left: 44%;
  top: 80%
}
#noticeBackground {
  background-color: rgb(194, 197, 194, 0.3);
  width: 100%;
  height: 100%;
  z-index: 0;
  position: fixed;
  top: 0%;
  left: 0%;
}
cs

CSS KEY point

모달창에서 가장 중요하게 생각해야 되는 개념은
position과 top left right bottom값
그리고 z-index값 이다

position

기본 position의 값은 static 이다.
즉 문단이나 박스에 정렬상태에 따라 철저히 지켜진다.
relative 는 static값 기준으로 주어진 크기에 움직인다.
absolute 는 부모를기준으로 움직이고,
내가 지금 하려는건 fixed 다.
fixed는 스크롤을 내려도 자신의 부모에 한해 쭉 화면을 고정하며 따라간다.

top 30% left 30%

top 30%는 위에서 30%떨어진 곳에서 위치하라는 뜻이고,
left 30%는 왼쪽에서 30%떨어진 곳에서 위치하라는 뜻이다.
만약 top과 left에 퍼센티지를 주고, 엘리먼트를 중앙에 위치시키고 싶다면,
엘리먼트의 넓이와 높이 또한 퍼센티지로 주는걸 강추한다!
ex)

z-index

z인덱스는 수의 크기에따라
엘리먼트가 겹칠경우 보여질엘리먼트의 순서를 정한다.
예를들어 div1과 div2가 겹친다고 했을때,

위 그림처럼 z-index가 높으면 겹쳤을 때 우선순위로 보인다

javascript

이제 자바스크립트는 매우 쉽다! 닫기 버튼이나 배경을 누르면
공지와 공지배경의 display가 none이 되게,
공지확인 버튼을 누르면 공지와 공지배경 display 가 block이 되게
하면된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const notice = document.querySelector('#notice')
const showNoticeBtn = document.querySelector('#showNoticeBtn')
const closeNoticeBtn = document.querySelector('#closeNoticeBtn')
const noticeBackground = document.querySelector('#noticeBackground')
 
showNoticeBtn.onclick = function(){
  notice.style.display = 'block';
  noticeBackground.style.display ='block';
}
closeNoticeBtn.onclick = function(){
  notice.style.display = 'none';
  noticeBackground.style.display ='none';
}
 
noticeBackground.onclick = function(){
  notice.style.display = 'none';
  noticeBackground.style.display = 'none'
}
cs

css부분에서 정말 까다로웠지 충분히 해볼만한 로직이 아닌가?

스프린트 계획: https://sleepybird.tistory.com/120
이전편 보기: https://sleepybird.tistory.com/122

'📒Javascript' 카테고리의 다른 글

[88일차]javascript this 5분만에 소속밝혀내기  (0) 2020.12.06
[82일차][졸린새X코공]Part 2-2,Part 2-3 vanillaJS로 슬라이드창, 슬라이드 메뉴 만들기  (0) 2020.12.01
[76일차][졸린새X코공]solo-week-sprint-vanillaJS 계획  (0) 2020.11.23
[76일차]Geolocation API를 openweathermap에 활용해보기!  (0) 2020.11.23
[72일차](ToyProject)javascript DOM으로 하노이탑 만들기  (1) 2020.11.20
'📒Javascript' Related Articles more
Comments