[jQuery] 모달창 만들기

---

안녕하세요. 개자이너 씸플레이입니다.

 

모달창 이미지

오늘은 모달 창을 만들어 볼 예정입니다.

 

모달 창이란?

여러분도 한 번쯤은 보신 적이 있으실 겁니다. 버튼이나 이미지를 눌렀을 때 새로운 페이지가 열리지 않고 뒤쪽에 까만 배경이 생기면서 가운데에 어떤 문구나 이미지가 뜨는 걸 보신 적이 있죠? 그게 모달 창입니다.

 

잘 모르겠다고요? 괜찮습니다. 이 포스팅을 마지막까지 보시면 이런 걸 모달, 모달 창이라고 부르는군 하고 어디 가서 거들먹거릴 수 있게 됩니다. 얕은 지식이니까 심하게 거들먹거리지는 말도록 해요.

---

1. 구조

<button>모달창</button>

<div class="modal">
  <div class="modal_content" 
       title="클릭하면 창이 닫힙니다.">
    여기에 모달창 내용을 적어줍니다.<br>
    이미지여도 좋고 글이어도 좋습니다.
  </div>
</div>

 

모달창 구조

 

① 모달 창 구조 파악하기

 

• 일단 <button> 태그는 무시하세요. 클릭하면 모달 창이 나오게 만드려고 넣은 것입니다. 중요한 것은 모달 창 코드입니다.
• 노란색 박스는 검은색 배경을 넣어줄 것입니다. 모달 전체를 감싸고 있군요.
• 파란색 박스는 모달의 내용을 넣어줄 것입니다. 간단하게 글만 적어줬지만 이미지나 표 등 넣고 싶은걸 마음껏 넣으셔도 됩니다.

---

2. 꾸미기

.modal{ 
  position:absolute; 
  width:100%; height:100%; 
  background: rgba(0,0,0,0.8); 
  top:0; left:0; 
  display:none;
}

 

① 배경 넣기

 

• 다른 css들은 따라 하지 않아도 괜찮지만 배경은 꼭 넣어주세요.
• position:absolute; - 기존 페이지와 분리를 위해 포지션을 이용해 띄워줍니다. 만약 포지션을 다른 곳에도 사용했다면 z-index의 값을 가장 높게 설정해줍니다.
• width, height - 값을 100%로 설정해 전체 화면에 배경을 깔아 모달을 잘 보이게 만들어 줍니다.
• background: rgba(0,0,0,0.8); - 다른 색으로 해도 상관없지만 rgba를 이용해 투명도를 활용해주세요. 뒤쪽으로 본래 사이트가 살짝 보이기 때문에 통일감이 있고 디자인적으로도 더 보기 좋습니다.
• top, left - 값을 0으로 설정해 좌표의 시작이 화면 끝에 맞도록 해주세요. 이해가 가지 않는다면 속성이 있을 때와 없을 때를 비교해봅시다.
• display:none; - 클릭 전에는 모달 창이 보이지 않으니 일단 가려둡니다. 디자인이 모두 끝난 후에 넣어주세요.

 

모달창 화면

② 화면 확인

 

• 배경이 깔려있기 때문에 모달 창이 눈에 잘 들어옵니다.
• 원하는 디자인이 나왔다면 display:none;을 이용해 모달 창을 전부 가려줍니다.
• 모달 창 내용의 css는 생략했습니다. 자세한 코드는 아래 코드 펜을 확인해주세요.

320x100

---

3. 제이쿼리

$(function(){ 

  $("button").click(function(){
    $(".modal").fadeIn();
  });
  
  $(".modal_content").click(function(){
    $(".modal").fadeOut();
  });
  
});

 

제이쿼리 화면

① 제이쿼리 선언하기

 

• $(function(){ }); - 노란색 박스 부분입니다. 이 코드를 가장 바깥쪽에 적어 제이쿼리를 선언합니다.
• 이 코드 안쪽에만 제이쿼리를 작성할 수 있습니다.
• { } - 중괄호 안쪽에만 적어주세요.

② 버튼 클릭 시 동작

 

• $("button").click( ); - 파란색 박스 부분입니다. 클릭 메서드를 이용해서 클릭을 했을 때 어떤 일이 일어날지 적어줍니다.
• button은 <button> 태그를 말합니다. html에서 보셨죠?
• $(".modal").fadeIn(); - 클릭했으니 모달 창을 보이게 해 줍니다. 페이드인 메서드를 이용합니다.

③ 모달 창 클릭 시 동작

 

• $(".modal_content").click( ); - 빨간색 박스 부분입니다. 동일하게 클릭 메서드를 이용합니다.
• $(".modal").fadeOut(); - 이번엔 클릭했을 때 사라지게 해 줍니다. 페이드 아웃 메서드를 활용합니다.

---

4. 코드 펜으로 확인하기

 

 

① 코드 확인

 

• 모달 창 버튼을 클릭해보며 화면을 확인해봅시다.
• 생략된 css 코드를 확인해봅시다.

 

[같이 보면 좋은 글]

[coding/jQuery +] - [jQuery] 버튼 누르면 리스트 나오게

[coding/editor] - [codepen] jQuery를 불러와보자

---

그럼 이만.

총총.