[Flask] 모달 창 만들기

프로젝트 간 모달 창을 만드는데 굉장히 애를 많이 먹었기에. (인터넷에 있는 오픈 소스도 원리나 코드를 이해하는데 어려웠다) 다음에 재활용하기 위해 코드를 정리해서 남겨 두었다. 

 

모달 창 원리

모달 창의 가장 큰 원리는 Block을 미리 만들어 놓고 보였다, 안보였다 하는 것이다. 몇가지 Key는 다음과 같다.

1. Overlay Div와 Modal Div를 만드는 것

2. CSS 'Display' 속성을 'none'과 'block(flex)' 등으로 바꾸는 것 (JS Event)

3. CSS Position 으로 Modal 위치 조정 하는 것 (absolute, top:0, left:0 )

4. CSS Z-Index : Overlay Div를 Z축 최상단으로 조정하는 것

 

소스 코드

GitHub - SeonminKim1/Python: Python Framework & Libary