3. 내일배움캠프 - 2일차 TIL

---

 

 

 

TIL

 

오늘은 팀 프로젝트하면서 구현했던 코드 중 가장 생각 나는 부분을 써보려고 한다.

그건 바로 모달창이다.

 

모달창은 팝업창이랑 비슷하다 하지만 차이점이 있다.

- 팝업창 :
팝업창은 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것

- 모달창 :
모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것

 

👉 모달 팝업을 만들기 위한 필요한 기본적인 요소

1. 화면 전체를 어둡게 만들어주는 배경(background)
2. 모달 팝업을 감싸주는 창(window) 
3. 모달 팝업의 내용을 나타내는 팝업(popup)

 

 

배경과 창을 나타내는 HTML 코드

<div class="background">
	<div class="window">
    	<div class="popup"></div>
	</div>
</div>

 

 

배경을 위한 css 코드

.background {
        position: fixed; //스크롤이 발생하더라도 화면에 고정
        top: 0;
        left: 0;
        width: 100%;	//width와 height으로 화면에 가득 차게 입력
        height: 100vh;		
        background-color: rgba(0, 0, 0, 0.8); //어두운 정도는 0.8
        z-index: -1;      //-1줘서 숨김

 

 

.window {
        position: relative; //팝업이 들어갈 공간을 제한해주어야 하기 때문에 relative 추가
        width: 100%;  //배경에 가득차도록 width, height 값을 줌
        height: 100%;
      }

 

 

.show {
        opacity: 1;
        z-index: 1000; //.background에서 숨긴거 다시 복구
        transition: all 0.5s; //원래대로 나타날때 시간은 0.5초 지정
      }

 

 

 

 

 

- 자바스크립트 이벤트를 통해 팝업을 띄우고, 종료하는 함수 만들기

function show () { //팝업 띄우기
  document.querySelector(".background").className = "background show";
}
//class 이름이 background인 첫번째 요소의
//class 이름에 show를 추가해 팝업을 연다.


function close() { //팝업 닫기
   document.querySelector(".background").className = "background";
      }
// 닫을 때는 class이름 중 show를 제거한다.     
      
document.querySelector("#show").addEventListener("click", show);
//.queryselector는 css선택자로 요소를 선택하여 리턴한다
//즉, 해당 코드는 id 값이 show인 첫번째 요소를 리턴한다
//이 요소에 addEventListener를 이용하여 클릭되었을 때 함수를 호출시킨다.

document.querySelector("#close").addEventListener("click", close);  
//id값이 close인 첫번째 요소를 리턴한다

 

 

 

 

 

내일이 바로 발표다. 발표는 하고싶지 않지만 잘 준비해서 

내일 떨지 않고 잘 했으면 좋겠다.