팝업창 만들기

1. 목표

2. 완성 코드

---

1. 목표

[그림 1] 팝업창을 띄우도록 하는 버튼

버튼을 클릭하면 팝업창이 나타나도록 하는 것이 목표이다.

 

[그림 2] 버튼을 눌러 팝업창이 나타났을 때 모습

버튼을 누르면 배경색이 바뀌고 팝업창이 나타난다. 이때 팝업창의 X를 클릭하면 다시 [그림 1]의 상태로 돌아간다.

 

 

2. 완성 코드

[그림 3] HTML 문서

input 태그를 써서 checkbox 타입을 지정하고, id는 layerPopup이라고 했다. label 태그를 붙여서 "버튼"이라고 쓰여져 있는 곳을 클릭해도 체크박스를 클릭한 것과 똑같이 작동하도록 만들어 주었다.

 

div 태그를 이용하여 팝업창이 떴을 때 나타나는 배경 layer_bg과 팝업창 popup을 생성했다. h2 글자 크기로 제목을 적고 label 태그로 X를 클릭하면 체크박스를 클릭한 것과 똑같이 작동하도록 만들어 주었다.

 

[그림 4] CSS 문서 설명

[그림 4]는 CSS에 대한 설명이다. transform과 box-shadow 속성에 대해 한 번 더 짚고 넘어가자.