css 만으로 반응형 modal 팝업 간단하게 만들기

이번엔 display flex를 활용하여 간단하게 모달 컨펌 팝업을 만들어 볼까 합니다.

 

플러그인이나 라이브러리, 각종 js등을 사용하지 않고 간단하게 css만을 사용하여 만들 수 있습니다.

jquery 가 일부 들어가는데 click 이벤트나 요소를 감추고, 보이게하는 fadeIn(), fadeOut()만 사용합니다.

<div class="container"> //컨테이너
  <div class="popup-wrap" id="popup"> //모달을 감쌀 박스
    <div class="popup">	//실질적 모달팝업
      <div class="popup-head">	//로고 영역
          <span class="head-title">MuziMuzi</span>
      </div>
      <div class="popup-body">	//컨텐츠 영역
        <div class="body-content">
          <div class="body-titlebox">
            <h1>Confirm Modal</h1>
          </div>
          <div class="body-contentbox">
            <p> 모달 내용칸 </p>
          </div>
        </div>
      </div>
      <div class="popup-foot"> //푸터 버튼 영역
        <span class="pop-btn confirm" id="confirm">확인</span>
        <span class="pop-btn close" id="close">창 닫기</span>
      </div>
    </div>
</div>
</div>

위 코드가 모달 팝업의 전체 html 코드입니다.

기본 html 구성과 비슷하게 머리, 몸통, 다리 영역으로 나누었습니다.

 

작업 순서

 

1. 모달 팝업을 감쌀 박스의 css 작성

- display 속성은 팝업을 중앙에 위치 시키기 위해 flex를 사용합니다. 

- 버튼 클릭 이벤트를 위해 display:none;을 주고 있지만 처음부터 화면에 뜨게 하려면 flex주시면 됩니다.

.popup-wrap{
  background-color:rgba(0,0,0,.3); 
  //배경색과 투명도로 살짝 어둡지만 투명한 배경
  //허공에 붕 떠있는 느낌을 주고 싶으면 안넣어도 무방
  justify-content:center; //수평 중앙정렬
  align-items:center;     //수직 중앙정렬
  position:fixed;         // 포지션 픽스, 화면이 스크롤되더라도 고정되기 위함
  top:0;
  left:0;
  right:0;
  bottom:0;               //모든 방향에 0을 주면 화면에 꽉차게 됩니다.
  display:none; 
  //이벤트가 발생할 때 띄우기 위해 숨김
  //처음부터 보이게 하는 상황이라면 display:flex;
  padding:15px; 
  //반응형의 경우 padding이 없으면 박스가 화면에 붙어서 안이뻐짐
}

 

2. 모달 팝업의 몸체 css 작성

- 반응형이기 때문에 가로값(width)은 100%를 잡고, max-width로 최대값을 잡습니다.

- 높이(height)는 내부 요소 크기에 따라가기 때문에 따로 잡지 않습니다.

.popup{
  width:100%;               //반응형 이기 때문에 가로값은 100%
  max-width:400px;          //팝업의 최대 크기지정
  border-radius:10px;       //둥글둥글한 디자인을 위해 각을 없앱니다.
  overflow:hidden;          //각을 없앴을 때 내부 영역이 튀어나오는걸 방지
  background-color:#264db5; //배경색
  //팝업이 허공에 떠있는 듯한 느낌을 주기 위한 그림자 효과.
  box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3); 
}

 

3. 모달팝업 머리부분(로고영역) css

- 로고영역은 사이트의 로고이미지나, 텍스트 위치시켜 주시면 됩니다.

.popup-head{
  width:100%;
  //부모요소를 따라가기 때문에 굳이 가로값을 주지 않아도 되지만 일부 ie에서 인식 못하는 문제가 있음
  height:50px;  //헤드 영역 높이
  display:flex; //로고 이미지나 텍스트를 중앙 정렬하기 위한 flex 및 정렬
  align-items:center;
  justify-content:center;
}

 

1, 2, 3번을 적용 시킨 상태 (어두운 투명배경, 상단 로고)

 

4. 모달팝업 몸통부분(contents 영역) css

- body영역은 내용에 스크롤이 발생 할 수 있기 때문에 좀 더 세분화 했습니다.(popup-body 박스안에 body-content)

- 내용은 자유롭게 넣어주시면 됩니다.

- 이미지 팝업을 만들 경우 padding:30px 은 뺴주시면 됩니다.

- 저는 공지사항 형태의 팝업을 만들었기 때문에 제목(body-titlebox)과 내용영역(body-contentbox)이 있지만 하려는 목적에 따라 바꿔 사용하시면 됩니다.

.popup-body{                //몸통
  width:100%;
  background-color:#ffffff; //컨텐츠 영역의 배경색
}
.body-content{              //몸통 내부 컨텐츠 영역
  width:100%;
  padding:30px;             //좌우에 내용이 붙으면 보기 안좋기 때문에 간격 띄움
}
.body-titlebox{             //컨텐츠 타이틀 영역
  text-align:center;        //제목 중앙정렬
  width:100%;
  height:40px;
  margin-bottom:10px;       //내용과 간격 조정
}
.body-contentbox{           //컨텐츠 내용 영역
  word-break:break-word;    //단어가 짤리지 않음
  overflow-y:auto;          //내부요소가 지정한 세로 값보다 클 경우 스크롤 생성
  min-height:100px;         //최소 높이
  max-height:200px;         //최대 높이
}

 

4번까지 적용시 (슬슬 모양이 나오네요)

 

5. 모달팝업 다리부분(버튼 영역) css

- 2개의 버튼중 가운데 한줄만 줄을 쳐야 하기 때문에 왼쪽버튼에 오른쪽 줄을 쳤습니다.

.popup-foot{                      //다리
  width:100%;
  height:50px;
}
.pop-btn{ //각각의 버튼
  display:inline-flex;            //한줄로 나열하기 위한 inline속성과 flex속성 혼합
  width:50%;                      //2개 버튼 각각 50% 영역
  height:100%;                    //50px
  justify-content:center;         //수평정렬
  align-items:center;             //수직정렬
  float:left;                     //좌측배치
  color:#ffffff;                  //글자색
  cursor:pointer;                 //마우스 포인터 효과
}
.pop-btn.confirm{                 //확인버튼
  border-right:1px solid #3b5fbf; //오른쪽 줄
}

 

완성된 모달 팝업창

 

위 까지가 모달의 html코딩 및 css 코딩이었고 

이제 jquery로 간단한 특정 이벤트만 주면 끝입니다.

 

저는 예시를 들기 위해 버튼으로 했지만 

회원가입 시, 중요한 값을 넘길 때 등등에 걸어 주시면 좋습니다.

 

jQuery 코드

- 여기서 중요한 점은 fadeIn(),show() 의 경우 이벤트 해당 박스의 이전 display 속성을 원래대로 돌려준다는 점 입니다.

  현재 div#popup 에는 display:none 이 걸려있는데 감춰져 있는 요소를 fadeIn() 으로 노출 시키면 

  div의 기본 속성인 display:block을 불러옵니다. (그럼 flex로 중앙정렬을 하고 있기 떄문에 UI가 깨집니다)

  이를 방지 하기 위해 감춰져있는 요소의 속성을 display:flex로 변경해 준 후 hide()로 다시 숨기고 

  fadeIn() 으로 다시 노출 시키면 flex 였다가 none 이 되었기 때문에 flex속성을 다시 불러옵니다.

$(function(){
  $("#confirm").click(function(){
      modalClose(); //모달 닫기 함수 호출
      
      //컨펌 이벤트 처리
  });
  $("#modal-open").click(function(){        
      $("#popup").css('display','flex').hide().fadeIn();
      //팝업을 flex속성으로 바꿔준 후 hide()로 숨기고 다시 fadeIn()으로 효과
  });
  $("#close").click(function(){
      modalClose(); //모달 닫기 함수 호출
  });
  function modalClose(){
      $("#popup").fadeOut(); //페이드아웃 효과
  }
});

 

버튼 이벤트 까지 완료한 작업 결과는 아래 코드에서 확인 하실 수 있습니다.(버튼을 클릭해주세요!)

 

 

See the Pen flex modal by MUZI (@muzimuzi) on CodePen.