반응형
팝업창(modal) 만들기
보통 경고문구나 안내사항을 화면에 표시할때 javascript의 alert라는 함수를 이용하여 사용자에게 안내를 한다. alert창은 브라우저에 내장되어있는 디자인으로 화면에 표시되어 사용자에게 딱딱한 느낌을 들게 하기도 한다. 웹사이트 디자인컨셉에 맞는 팝업창은 모달(modal)이라는 jquery 라이브러리에서 지원하는데 간단히 제작해 보기로 하자.
1. 모달창 구조
모달창은 페이지의 특정영역을 클릭하거나 다음페이지로 넘어가기 전에 안내사항을 화면에 한번 더 표시해 주기 때문에 사용자들에게 가독성이 아주 좋다. 특히 폼구문을 제작할 때 사용자들에게 여러가지 안내사항 및 경고문구를 보여주어야 하기 때문에 많이 사용되어 진다.
아래의 구조로 모달창을 만들어보자.
| 모달창 타이틀(popup_head) |
| 모달창 내용(popup_body) |
| 확인/ 닫기 버튼(popup_foot) |
<div class="popup_wrap" id="popup">
<div class="popup">
<div class="popup_head">
<span class="head_title">OPEN EVENT!</span>
</div>
<div class="popup_body">
<div class="popup_content">
<b>POP-UP STORE</b><br>
GRAND OPEN
<div class="co">
06.01 ~ 06.15 (15일간) <span> 09:00 ~ 18:00</span>
</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>
2. CSS 코드
모달창이 나올때 바깥쪽 전체를 감싸는 어두운 부분(popup_wrap) 안쪽에 실제 모달창인 팝업창이 나온다. 위의 이미지처럼 CSS를 제작해보자.
.btn{width:100%; text-align: center; padding-top:300px;}
.btn button{ display:inline-block; width:150px; height:50px; background-color:#f1f1f1;
border:1px solid #dcdcdc; cursor:pointer;padding:8px 0; }
.popup_wrap{ background-color:rgba(0,0,0,.7); width:100%; justify-content:center;align-items:center;
position:fixed; top:0; left:0;right:0; bottom:0; display:none; }
.popup{ position:absolute; top: 50%; left: 50%; margin:-180px 0px 0px -200px; width:300px; height:300px;
background:#fff; border-radius:10px; overflow:hidden; border:3px solid #efe1d9;
color:#1d2c3a;padding:50px; }
.popup_head{width:100%;height:50px; display:flex; align-items:center; justify-content:center;
border:2px solid #1d2c3a; border-radius:50px; font-size:22px;font-weight:400; }
.popup .popup_content{text-align: center; font-size:38px;font-weight:500; }
.popup_content .co{font-size:14px; margin:20px 0;padding:5px 0; border-top:1px solid #1d2c3a; border-bottom:1px solid #1d2c3a; }
.popup_foot{margin:50px 0;height:40px;line-height:40px; text-align:center; }
.pop_btn{border:1px solid #1d2c3a;padding:10px 30px; cursor: pointer;} .pop_btn:hover{background:#1d2c3a; color:#fff}
아래의 완성된 코드를 보고 확인해보도록 하자.
See the Pen Untitled by younwook choi (@wooknim) on CodePen.
※ 완성된 코드에는 마우스이벤트가 있으므로 반드시 JQUERY 를 사용해 주어야 한다.
