이번엔 display flex를 활용하여 간단하게 모달 컨펌 팝업을 만들어 볼까 합니다. 플러그인이나 라이브러리, 각종 js등을 사용하지 않고 간단하게 css만을 사용하여 만들 수 있습니다. jquery 가 일부 들어가는데 click 이벤트나 요소를 감추고, 보이게하는 fadeIn(), fadeOut()만 사용합니다.
위 코드가 모달 팝업의 전체 html 코드입니다. 기본 html 구성과 비슷하게 머리, 몸통, 다리 영역으로 나누었습니다. 작업 순서 1. 모달 팝업을 감쌀 박스의 css 작성 - display 속성은 팝업을 중앙에 위치 시키기 위해 flex를 사용합니다. - 버튼 클릭 이벤트를 위해 display:none;을 주고 있지만 처음부터 화면에 뜨게 하려면 flex주시면 됩니다.
2. 모달 팝업의 몸체 css 작성 - 반응형이기 때문에 가로값(width)은 100%를 잡고, max-width로 최대값을 잡습니다. - 높이(height)는 내부 요소 크기에 따라가기 때문에 따로 잡지 않습니다.
3. 모달팝업 머리부분(로고영역) css - 로고영역은 사이트의 로고이미지나, 텍스트 위치시켜 주시면 됩니다. 1, 2, 3번을 적용 시킨 상태 (어두운 투명배경, 상단 로고)4. 모달팝업 몸통부분(contents 영역) css - body영역은 내용에 스크롤이 발생 할 수 있기 때문에 좀 더 세분화 했습니다.(popup-body 박스안에 body-content) - 내용은 자유롭게 넣어주시면 됩니다. - 이미지 팝업을 만들 경우 padding:30px 은 뺴주시면 됩니다. - 저는 공지사항 형태의 팝업을 만들었기 때문에 제목(body-titlebox)과 내용영역(body-contentbox)이 있지만 하려는 목적에 따라 바꿔 사용하시면 됩니다. 4번까지 적용시 (슬슬 모양이 나오네요)5. 모달팝업 다리부분(버튼 영역) css - 2개의 버튼중 가운데 한줄만 줄을 쳐야 하기 때문에 왼쪽버튼에 오른쪽 줄을 쳤습니다. 완성된 모달 팝업창위 까지가 모달의 html코딩 및 css 코딩이었고 이제 jquery로 간단한 특정 이벤트만 주면 끝입니다. 저는 예시를 들기 위해 버튼으로 했지만 회원가입 시, 중요한 값을 넘길 때 등등에 걸어 주시면 좋습니다. jQuery 코드 - 여기서 중요한 점은 fadeIn(),show() 의 경우 이벤트 해당 박스의 이전 display 속성을 원래대로 돌려준다는 점 입니다. 현재 div#popup 에는 display:none 이 걸려있는데 감춰져 있는 요소를 fadeIn() 으로 노출 시키면 div의 기본 속성인 display:block을 불러옵니다. (그럼 flex로 중앙정렬을 하고 있기 떄문에 UI가 깨집니다) 이를 방지 하기 위해 감춰져있는 요소의 속성을 display:flex로 변경해 준 후 hide()로 다시 숨기고 fadeIn() 으로 다시 노출 시키면 flex 였다가 none 이 되었기 때문에 flex속성을 다시 불러옵니다.
버튼 이벤트 까지 완료한 작업 결과는 아래 코드에서 확인 하실 수 있습니다.(버튼을 클릭해주세요!) See the Pen flex modal by MUZI (@muzimuzi) on CodePen. |