[jQuery] 헤더, 푸터 고정/오버레이 클릭 시 사라지는 모달

 

 

 

 

 

헤더 및 푸터는 고정이며 그 안의 컨텐츠만 스크롤이 생기는 모달이다.

 

onclick="modalControl('o', '#modal1', '600')"

//modalControl(타입 - 여는버튼은 o 닫는버튼은 c, 모달id, 모달 가로 사이즈)

의 방식으로 사용할 수 있다.

 

모달을 중앙에 정렬하기 위해 여러 가지 방법을 사용해 보았지만

부모 요소에 display:table을 걸고 display:table-cell로 지정하는 방법이 가장 깔끔한 것 같다.

단계가 좀 깊어지긴 하지만 다른 방법들의 단점이 너무 치명적이다.

 

top:50%;left:50%;transform(-50%,-50%)의 방법이 간단해 보이지만

위치가 퍼센트로 계산되기 때문에 크롬에서는 border/ie에서는 글자 등이 흐리게 보이는 단점이 있다.

내가 보기에는 너무 신경쓰여서 쓰지 않기로 했다.

 

광범위하게 사용하기 위해 모달 가로 사이즈를 지정하는 옵션을 넣었는데,

픽셀로 숫자를 넣으면 모달에 modal-"size" class가 추가된다.

사용하려면 사이즈별 css 추가가 필요하다.

 

모달 종류는 두 가지로 제작하였는데,

하나는 뒤의 오버레이를 클릭하면 사라지는 모달이며

다른 하나는 뒤의 오버레이를 클릭해도 사라지지 않는 모달이다.

 

오버레이 클릭 시 사라지게 하려면 모달 최상위 class에 "modal_overlay"를 추가하면 된다.