요기보드

선 택 과 목

자바스크립트

모달(Modal)

모달(Modal)의 정확한 영어 의미는 모르겠어.
그렇지만 대부분의 프로그램에서는 윈도우의 최상단에 떠 있는 팝업 윈도우창을 뜻해.
아마도 modal 에 '보조의' 라는 뜻이 있으니 '보조창'의 의미로 쓰이는 것 아닐까 추측하고 있어.
모달창이 뜨면 뒤에 있는 내용들은 선택할 수 없고, 이 모달창을 닫으면 이전 창으로 돌아가는 작업에서 맨 위에 뜬 창을 보통 '모달(Modal) 창' 이라고 불러.

어원은 정확하지 않지만 어쨌든 이 '모달창'은 컴퓨터 프로그램에서 아주 많이 쓰여.
가장 대표적인 모달이 바로 alert() 야. 여기서 [확인]은 눌러야 다음 작업이 진행 되잖아.
또 alert() 말고도 종종 사용 되는 곳이 팝업창이야.
사용자가 꼭 봐야하는 중요 공지나 광고등을 모달창으로 띠우는 경우가 많아.

예전에는 광고를 띠우기 위해 웹페이지에 별도의 브라우저창을 띠우는 방식을 주로 사용했어.
(이전 강의 setTimeup 에서 연습한 팝업창 같은..)
그런데 광고가 너무 많이 뜨자 이런 브라우저 자체에서 팝업창을 막아 버리는 기능을 넣어서 최근에는 웬만한 팝업창은 다 막혀서 뜨지 않아.
그런데 이런 팝업공지가 꼭 필요할 때도 브라우저가 막아서 못뜨면 그것도 문제거든..
그때 이 '모달창'을 사용하면 돼.

모달창은 이미 앞서 감추기,배우기에서 배운 코드의 응용이야.
예제 코드를 보면 아마 바로 이해할 수 있을거야.

1. 아래 내용을 복사해서 js.html 을 바꿔치고 저장해서, 실행해 봐.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.modal {
  position: fixed;
  z-index: 1;
  left: 100px;
  top: 100px;
  width: 500px;
  background-color: red;
}

.modal-content {
  background-color: white;
  margin: 2px;
  padding: 20px;
}
</style>
</head>
<body>

<h1>내 홈페이지</h1>
<h3>우리집 홈페이지에 오신 것을 환영합니다.</h3>
지금은 공사중입니다.


<div id="myModal" class="modal">
  <div class="modal-content">
    <button id="close" style="float:right">닫기</button><br>
    <p> 학교종이 땡땡땡<br>
		어서 모이자<br>
		선생님이 우리를<br>
		기다리신다.<br>
	</p>
  </div>
</div>

<script>
let modal = document.getElementById("myModal");
let close = document.getElementById("close");

close.onclick = function() {
  modal.style.display = "none";
}
</script>

</body>
</html>

'모달'창의 주역은 사실 자바스크립트가 아니고 스타일(CSS)이야.
자바스크립트의 역할은 맨 위에 떠 있는 모달 div 를 닫는 역할을 할 뿐이지.

위 예제를 보면 모달창을 담당하는 div 의 속성이 position:fixed 이고 z-index:1 로 되어 있는 것을 볼 수 있어.
스타일에서 position:fixed 이면 div를 고정된 위치에 보이라는 뜻이고, z-index:1 이면 다른 창들 위에 위치하라는 뜻이야.
z-index 의 숫자가 커질수록 위 쪽에 표시돼.
여기는 CSS 강좌가 아니고 자바스크립트 강좌인 만큰 이정도만 설명할께.
자세한 것은 인터넷에서 검색해 봐.

[닫기] 버튼을 클릭하면 이 div 창을 감추도록 했어.
앞서 학습은 button 태그에 onclick="hide()" 같은 방식으로 공부했으니, 여기서는 약간 다른 방식으로 코드를 써봤어.
[닫기] 버튼을 close 변수객체에 연결해 두고, close.onclick 이벤트가 발생하면 작동을 하도록 했어.
또 앞서의 학습에서는 스타일을 변경할 때 style.setProperty("display", "none") 방식을 사용했는데, 여기서는 style.display 속성을 사용했어.
즉 아래 두개는 같은 거야.

modal.style.setProperty("display", "none") modal.style.display = "none"

위 예제는 [닫기] 버튼을 클릭해야만 모달창이 닫혀.
그런데 어떤 웹페이지들을 보면 이 모달창 밖 어떤 자리를 클릭해도 닫히는 것을 볼 수 있어.
이런 건 어떻게 할까?
이것 역시 여러분의 실력 정도면 이제 소스를 보면 쉽게 알 수 있어.
링크만 남겨 두니 궁금한 사람은 클릭 : https://www.w3schools.com/howto/howto_css_modals.asp

목차	제 목	조회
1	자바스크립트란 무엇인가?	173
2	script 와 alert	200
3	변수, 상수, 배열	195
4	개발자 도구, 콘솔	175
5	조건문(if) 반복문(for)	175
6	함수(function)	197
7	DOM	168
8	감추기, 보이기	239
9	내용 바꾸기	153
10	입력내용 검사	158
11	AJAX	175
12	타이머	148
13	모달(Modal)	195
14	객체와 JSON	175
15	[실전] 감추기, 보이기, 토글	123
16	[실전] 슬라이딩 효과	97
17	[실전] slideUp , slideDown , slideToggle	91
18	[실전] 슬라이드쇼 만들기 (1)	104
19	[실전] 슬라이드쇼 만들기 (2)	109
20	[실전] 슬라이드쇼 만들기 (3) - 외부 라이브러리 사용	107
21	[실전] 마우스 스크롤	115
22	[실전] 나 만의 라이브러리 만들기	112
23	스스로 공부하기	154