본문 바로가기
웹/HTML, CSS

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

by MUZIMUZI 2020. 9. 21.

이번엔 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.

댓글0