[Html, css] 모달 팝업창 만들기

프로젝트를 하다 보면 팝업창을 만들어야 하는 경우가 자주 있습니다.

팝업 종류에는 여러가지가 있는데, 오늘 정리할 것은 '모달 팝업'입니다. (혹은 레이어 팝업)

 

⭐️ modal popup 만들기

1, 딤(Dim) 배경

2, 팝업 큰틀

3, 팝업 오픈 클로즈 이벤트 만들기

 

1, 배경

팝업을 강조하기 위해 딤(Dim)/딤드(Dimmed)라고 하는 배경을 만들어줍니다.

스크롤이 생겨도 고정되게 position 은 fixed로 잡고

화면에 꽉 차게 하기 위해 width, height 100%으로 줍니다.

보통 팝업의 배경(Dim)은 반투명 검은색입니다.

background : rgba(0, 0, 0, 0.3)으로 설정해줍니다.

0.3은 투명도이기 때문에 원하는 정도로 조절하시면 됩니다.

.modal-bg {width:100%;height:100%;position:fixed;top:0;left:0;right:0;background: rgba(0, 0, 0, 0.6);z-index:999;}

 

 

2, 팝업 틀

화면 가운데 띄우기 위해서 position:absolute; top:50%; left:50%; 을 해준 뒤

transform:translate(-50%, -50%);를 추가해 정확히 화면 가운데로 오게 해 줍니다.

width, height는 본인이 원하는 값으로 작성합니다.

 

.modal-wrap {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;background:#fff;z-index:1000;}

 

전체적인 구조

modal 은 보통 전체적인 레이아웃 바깥쪽으로 넣어줍니다.

<!-- 전체 레이아웃 -->
	<div id="wrap">     
        </div>
<!-- //전체 레이아웃 -->

 <!-- modal 영역 -->
        <div class="modal-bg"></div> //modal 배경
        <div class="modal-wrap"> //modal 영역
           modal sample
        </div>
<!-- //modal 영역 -->

 

⭐️ 결과 화면

 

3, 이벤트 만들기

팝업은 보통 어떤 버튼을 클릭했을 경우 오픈되는 이벤트가 많기 때문에

팝업 배경과 팝업 스타일에 display:none을 추가합니다.

 

open 이벤트와 close 이벤트를 만든 후

이벤트가 일어날 영역에 onClick을 추가해줍니다.

 

 

See the Pen modal by jh-baek-95 (@jh-baek-95) on CodePen.

 

⭐️ Tip 팝업 오픈했을 때 밑에 깔린 레이어의 스크롤을 막는 방법

open 이벤트에 아래 소스를 추가해줍니다.

   $('html').css({
    overflow: 'hidden',
    height: 'auto'
});

이상태로만 추가한다면 팝업을 닫았을 때 스크롤이 없어진 상태이기 때문에

 

close 이벤트에는 아래 소스를 추가해줍니다.

$('html').removeAttr('style');

그럼 기존 레이어의 스크롤이 돌아옵니다.

완성!

 

22.12.06 추가

⭐️ 한 페이지에 여러가지 팝업을 띄우는 경우 

 

 

See the Pen modal_2 by jh-baek-95 (@jh-baek-95) on CodePen.