Modal(PC/MO)

모달(Modal)은 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능이다.

모달 창을 이용하면 사용자의 상호작용을 요구로 하고, 사용자가 상호작용을 할 때까지 부모 페이지에 대한 어떠한 조작도 못하도록 되어있다.

Modal - Large, Medium, Small, Alert, Confirm

PC

Large Modal Guide

<!-- Large 모달 시작 --> <div id="modal-large" class="modal modal--typeA"> <div class="modal__inner lg"> <div class="modal__close"> <button type="button" class="btn_modal_close" onclick="closeModal('modal-large')"></button> </div> <div class="modal__header"> <h3>레이어 팝업 타이틀</h3> </div> <div class="modal__content"> <div class="box" style="height: 580px; background-color: #F1F1F5;"></div> </div> <div class="modal__btns"> <button type="button" class="btn_modal btn-cancel" onclick="closeModal('modal-large')">취소</button> <button type="button" class="btn_modal btn-confirm">확인</button> </div> </div> </div> <!-- Large 모달 끝 -->

Medium Modal Guide

<!-- Medium 모달 시작 --> <div id="modal-medium" class="modal modal--typeA"> <div class="modal__inner md"> <div class="modal__close"> <button type="button" class="btn_modal_close" onclick="closeModal('modal-medium')"></button> </div> <div class="modal__header"> <h3>레이어 팝업 타이틀</h3> </div> <div class="modal__content"> <div class="box" style="height: 320px; background-color: #F1F1F5;"></div> </div> <div class="modal__btns"> <button type="button" class="btn_modal btn-cancel" onclick="closeModal('modal-medium')">취소</button> <button type="button" class="btn_modal btn-confirm">확인</button> </div> </div> </div> <!-- Medium 모달 끝 -->

Small Modal Guide

<!-- Small 모달 시작 --> <div id="modal-small" class="modal modal--typeA"> <div class="modal__inner sm"> <div class="modal__close"> <button type="button" class="btn_modal_close" onclick="closeModal('modal-small')"></button> </div> <div class="modal__header"> <h3>레이어 팝업 타이틀</h3> </div> <div class="modal__content"> <div class="box" style="height: 320px; background-color: #F1F1F5;"></div> </div> </div> </div> <!-- Small 모달 끝 -->

Alert Modal Guide

<!-- Alert 모달 시작 --> <div id="modal-alert" class="modal modal--typeA"> <div class="modal__inner sm"> <div class="modal__close"> <button type="button" class="btn_modal_close" onclick="closeModal('modal-alert')"></button> </div> <div class="modal__header"> </div> <div class="alert__content"> <h3>알림받기 설정완료!</h3> <div class="cnts"> <p> 내가 알림받는 스토어 목록은<br> 쇼핑 my > 관심스토어에서 확인할 수 있습니다. </p> </div> </div> <div class="modal__btns"> <button type="button" class="btn_modal btn-confirm">확인</button> </div> </div> </div> <!-- Alert 모달 끝 -->

Confirm Modal Guide

<!-- Confirm 모달 시작 --> <div id="modal-confirm" class="modal modal--typeA"> <div class="modal__inner sm"> <div class="modal__close"> <button type="button" class="btn_modal_close" onclick="closeModal('modal-confirm')"></button> </div> <div class="modal__header"> </div> <div class="alert__content"> <h3>아직 작성중인 내용이 있습니다.<br> 페이지를 벗어나시겠습니까?</h3> <div class="cnts"> <p> 임시저장 혹은 저장하지 않고 페이지를 벗어날 경우,<br> 지금까지 작성한 내용이 사라집니다. </p> </div> </div> <div class="modal__btns"> <button type="button" class="btn_modal btn-cancel" onclick="closeModal('modal-confirm')">취소</button> <button type="button" class="btn_modal btn-confirm">확인</button> </div> </div> </div> <!-- Confirm 모달 끝 -->

레이어 팝업 타이틀

레이어 팝업 타이틀

레이어 팝업 타이틀

알림받기 설정완료!

내가 알림받는 스토어 목록은
쇼핑 my > 관심스토어에서 확인할 수 있습니다.

아직 작성중인 내용이 있습니다.
페이지를 벗어나시겠습니까?

임시저장 혹은 저장하지 않고 페이지를 벗어날 경우,
지금까지 작성한 내용이 사라집니다.