Popup

디바이스 환경과 컨텐츠 내용 따라 전체화면을 사용하는 팝업과 일반적인 팝업, 말풍선 형태등 다양하게 사용가능합니다. 한 서비스에서 사용하는 팝업의 종류를 구분하여 가이드를 만들고 사용하도록 합니다.

[참고] 팝업에서의 버튼 레이블 정의

팝업에서 버튼의 레이블은 사용자의 의도와 동작을 고려하여 명확하게 표현되어야 합니다. 현재 사용자의 액에서 의도된 레이블로 표기되어야 하고, 서비스 내에서 일관성있게 사용되어져야 합니다.

2. Button

1. Normal Popup

일반적으로 사용되는 가장 기본적인 팝업으로 알림, 상태 확인 등으로 사용되어집니다. 로그아웃 확인 / 비밀번호 변경 / 컨텐츠 삭제 등의 확인 팝업

8KB

popup.css

<확인 팝업>

HTML

<div class="pop-wrap">
	<div class="dimmed-layer"></div>
	<div class="pop-container">
		<div class="base-txt-box">
			<h1>센서 등록 불가</h1>
			<p class="g-txt">
				팝업에서 설명해야 할 구체적인 내용이 들어갑니다.<br>
				서브카피 영역이기도 합니다.
			</p>
		</div>
		<div class="pop-btn-module solo-type"><!-- 2020.06.04 : 버튼 1개 일 경우에 solo-type 클래스 추가 (디자인 정합성) -->
			<button type="button" class="m-btn-type key-color">확인</button>
		</div>
	</div>
</div>

CSS

popup.css

/* popup */
	.pop-wrap {
		position:fixed;overflow:hidden;left:0;top:0;z-index:1000;width:100%;height:100%;text-align:left;
		display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
		align-items:center;-webkit-align-items:center;-webkit-justify-content:center;justify-content:center;
		-webkit-box-pack:center;-moz-box-pack:center;-ms-box-pack:center;
		-webkit-box-align:center;-moz-box-align:center;-ms-box-align:center;
	}
	.pop-wrap .act {color:#1769ff;}
	.pop-wrap .de-act {color:#999;}
	.dimmed-layer {position:absolute;left:0;top:0;z-index:1001;width:100%;height:100%;background-color:rgba(0,0,0,0.5);}
	.pop-wrap .pop-container {position:relative;z-index:1002;width:40rem;border-radius:0.4rem;box-shadow:0 1rem 1rem 0 rgba(0, 0, 0, 0.1);background-color:#fff;}
	.pop-wrap .pop-container.few-narrow-type {width:38rem;}
	.pop-wrap .pop-container.few-wide-type {width:48rem;}
	.pop-wrap .pop-container.few-wide-type.st02 {width:46rem;}
	.pop-wrap .pop-container.few-wide-type.st03 {width:50rem;}
	.pop-container.few-wide-type .pop-btn-module {padding-bottom:5rem;}
	.pop-container.few-wide-type .inp-st {height:5rem;}
	.pop-container.few-wide-type .pop-btn-module .m-btn-type {width:10rem;padding:0;}
	.pop-wrap .pop-container.more-few-wide-type {width:53rem;}
	.pop-container.more-few-wide-type .pop-btn-module .m-btn-type {width:10rem;padding:0;}
	.pop-container.more-few-wide-type .pop-btn-module {padding-bottom:5rem;}
	.pop-wrap .pop-container.wide-type {width:72rem;}
	.pop-container.wide-type .pop-btn-module {padding-bottom:5rem;}
	.pop-container.wide-type .pop-btn-module .m-btn-type {width:10rem;padding:0;}
	.pop-wrap .pop-container.more-wide-type {width:87.2rem;}
	.pop-container.more-wide-type .pop-btn-module {padding-bottom:5rem;}
	.pop-container.more-wide-type .pop-btn-module .m-btn-type {width:10rem;padding:0;}
	.pop-wrap .closed {position:absolute;right:3.1rem;top:2.8rem;overflow:hidden;width:4.5rem;height:4.5rem;text-indent:-999.9rem;background-color:transparent;}
	.closed:before, .closed:after {content:'';position:absolute;left:2.2rem;top:0.7rem;width:1px; height:3.1rem;background-color:#111;}
	.closed:before {transform:rotate(45deg);}
	.closed:after {transform:rotate(-45deg);}
	.base-txt-box {padding-top:5rem;text-align:center;}
	.base-txt-box.more-pd {padding-top:6rem;}
	.pop-wrap .base-txt-box h1 {margin-bottom:3rem;font-size:1.8rem;line-height:2.7rem;}
	.base-txt-box .g-txt {font-size:1.4rem;line-height:2rem;}
	.pop-btn-module {margin-top:4rem;padding-bottom:4rem;text-align:center;}
	.base-txt-box.more-pd + .pop-btn-module {padding-bottom:5rem;}
	.pop-btn-module .m-btn-type {margin-left:2rem;}
	.pop-btn-module .m-btn-type:first-of-type {margin-left:0;}
	.pop-btn-module.solo-type .m-btn-type {width:8.6rem;padding-left:0;padding-right:0;}
	.pop-btn-module.other-type {margin-top:3rem;}
	.pop-btn-module.other-type .m-btn-type {width:8.6rem;height:5.6rem;padding-left:0;padding-right:0;line-height:5.6rem;}
	/* popup form box */
	.pop-frm-box {padding:2.8rem 4rem 0 4rem;}
	.pop-container h1 {margin-bottom:2.9rem;font-size:2.2rem;line-height:3.3rem;}
	.pop-container .point {display:inline-block;overflow:hidden;width:0.6rem;height:0.6rem;border-radius:0.6rem;text-indent:-999.9rem;vertical-align:top;background-color:#ff4b4b;}
	.pop-container .tit-box {position:relative;margin-bottom:2.9rem;}
	.pop-container .tit-box h1 {margin-bottom:0;}
	.pop-container .tit-box p {position:absolute;right:0;top:1.1rem;font-size:1.2rem;line-height:1.8rem;color:#ff4b4b;}
	.pop-container.few-wide-type .pop-txtarea-box .tit-box p {top:1.2rem;}
	.pop-container .tit-box p .point {margin-top:0.5rem;margin-right:0.1rem;}
	.pop-frm-box .label-block {position:relative;display:block;margin-bottom:1rem;font-size:1.4rem;line-height:2rem;}
	.pop-frm-box .label-block .point {margin:0.3rem 0 0 0.3rem;}
	.pop-frm-box .g-txt {margin-bottom:3rem;font-size:1.4rem;line-height:2rem;}
	.pop-frm-box .inp-st {height:4rem;}
	.pop-frm-box .err .inp-st {border-color:#ff4b4b !important;}
	.pop-frm-box .ok .inp-st {border-color:#511ef4;}
	.pop-frm-box .part-sect {display:block;visibility:hidden;}
	.pop-frm-box .part-sect.active {display:block;visibility:visible;}
	.pop-frm-box .part-sect {margin-bottom:2.7rem;}
	.pop-frm-box .msg-sect {margin-bottom:1.7rem;}
	.pop-frm-box .msg-sect.etc {display:block;visibility:hidden;margin-bottom:0.7rem;}
	.pop-frm-box .msg-sect.etc.active {visibility:visible;}
	.pop-frm-box .msg-sect:last-of-type {margin-bottom:-2.3rem;}
	/* popup solo textarea box */
	.pop-txtarea-box {padding:2.8rem 4rem 0 4rem;}
	.pop-txtarea-box textarea.inp-st {height:30rem;border-radius:0.2rem;padding-top:0.9rem;padding-right:3rem;}
	.pop-txtarea-box .count {padding:0.4rem 0 0 0;color:#999;text-align:right;font-size:1.2rem;line-height:1.8rem;}
	.pop-txtarea-box .count span {color:#000;}
	.pop-txtarea-box + .pop-btn-module {margin-top:3rem;}
	.pop-txtarea-box + .pop-btn-module.origin-type {margin-top:4rem;}
	.pop-txtarea-box .set-sub-tit-box {margin:0 0 1.6rem 0;padding-top:0.3rem;}
	.pop-txtarea-box .set-sub-tit-box.solo-tit {margin-bottom:1rem;padding-top:0;}
	.pop-txtarea-box .set-sub-tit-box.part-line {margin-top:4.2rem;}
	.pop-txtarea-box .set-sub-tit-box h3 {font-weight:400;}
	.pop-txtarea-box .set-sub-tit-box h3 .point {margin:0.3rem 0 0 0.3rem;}
	.pop-txtarea-box .set-sub-tit-box .r-side {right:0;margin-top:0.1rem;}
	.pop-txtarea-box .set-sub-tit-box .r-side .help-txt {position:absolute;right:1rem;top:4rem;z-index:1;width:26.5rem;padding:0.8rem 0 0.8rem 1.9rem;letter-spacing:-0.05em;border-radius:0.2rem;box-shadow:0 1rem 1rem 0 rgba(0, 0, 0, 0.1);border:solid 1px #1769ff;line-height:1.8rem;background-color:#fff;}
	.pop-txtarea-box .set-sub-tit-box .r-side .help-txt:after {content:'';position:absolute;border-style:solid;border-width:0 6px 9px;border-color:#FFFFFF transparent;display:block;width:0;z-index:1;top:-9px;right:16px;}
	.pop-txtarea-box .set-sub-tit-box .r-side .help-txt:before {content:'';position:absolute;border-style:solid;border-width:0 6px 9px;border-color:#1769ff transparent;display:block;width:0;z-index:0;top:-10px;right:16px;}
	.pop-container .pop-txtarea-box .inp-st.txt-copy {display:block;width:100%;height:17rem;}
	.pop-container .pop-txtarea-box .inp-st.txt-paste {display:block;width:100%;height:15rem;}
	/* popup table box */
	.pop-tb-box {padding-top:2.8rem;}
	.pop-container .pop-tb-box .tit-box {padding:0 4rem;}
	.pop-container .frm-chk.st01 + label {display:inline-block;overflow:hidden;width:2rem;height:2rem;vertical-align:middle;text-indent:-999.9rem;}
	.pop-inp-wrap {margin:2.9rem 4rem 2rem 4rem;padding:1.5rem 0;background-color:#f9f9f9;}
	.pop-inp-wrap .inp-box {position:relative;display:block;width:50rem;margin:0 auto;}
	.pop-inp-wrap .inp-box .inp-st {height:4rem;}
	.pop-inp-wrap .inp-box .inp-st:disabled + .btn-exec {cursor:default;outline:none;}
	.pop-inp-wrap .inp-box .inp-st:disabled + .btn-exec:before {background-position:-2.4rem 0;}
	.pop-inp-wrap .inp-box .btn-exec {position:absolute;right:0.6rem;top:50%;overflow:hidden;width:3.6rem;height:3.6rem;margin-top:-1.8rem;text-indent:-999.9rem;}
	.pop-inp-wrap .inp-box .btn-exec:hover {border-radius:3.6rem;background-color:#f5f5f5;}
	.pop-inp-wrap .inp-box .inp-st:disabled + .btn-exec:hover {background-color:transparent;}
	.pop-inp-wrap .inp-box .btn-exec:before {position:absolute;left:50%;top:50%;content:'';width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;background:url('../images/set_ico_search.png') no-repeat;background-size:auto 2.4rem;}
	.pop-scr-box {overflow:auto;max-height:40rem;padding-right:1rem;margin:0 3rem 0 4rem;-webkit-overflow-scrolling:touch;}
	.pop-scr-box .tb-col-view {margin:0;}

<사용자 액션에 대한 선택 팝업>

HTML

<div class="pop-wrap">
	<div class="dimmed-layer"></div>
	<div class="pop-container">
		<div class="base-txt-box">
				<h1>팝업의 목적인 내용이 들어갑니다.</h1>
				<p class="g-txt">
					팝업목적의 설명이 들어갑니다.
				</p>
			</div>
		<div class="pop-btn-module">
			<button type="button" class="m-btn-type">취소</button><button type="button" class="m-btn-type key-color">확인</button>
		</div>
	</div>
</div>

2. Table Popup

테이블 리스트가 사용되는 팝업으로 노출되는 정보의 양에 따라 팝업의 크기 및 align의 변경이 가능합니다. 확인 버튼 또는 닫기 버튼이 존재해야 합니다. (중복금지) (팝업의 전체 높이값 고정으로 리스트가 늘어나게되면 스크롤이 생길 수 있습니다.) 정보확인 팝업

<팝업 사이즈 고정시 스크롤>

<div class="pop-wrap">
	<div class="dimmed-layer"></div>
	<div class="pop-container wide-type">
		<div class="pop-tb-box">
			<div class="tit-box">
				<h1>타이틀 영역</h1>
			</div>

			<div class="pop-scr-box">
				<table class="tb-col-view">
					<colgroup>
						<col width="20%">
						<col width="30%">
						<col width="50%">
					</colgroup>
					<thead>
						<tr>
							<th scope="col">타이틀 1</th>
							<th scope="col">타이틀 2</th>
							<th scope="col">타이틀 3</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>아무개</td>
							<td>2019.10.31</td>
							<td>010-2256-8237</td>
						</tr>
						<tr>
							<td>아무개</td>
							<td>2019.10.31</td>
							<td>010-2256-8237</td>
						</tr>
						<tr>
							<td>아무개</td>
							<td>2019.10.31</td>
							<td>010-2256-8237</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<리스트 내용없음>

3. Search Popup

사용자가 검색을 하고, 정보 입력을 통해 검색 결과 값을 얻을 수 있는 팝업입니다. 주소검색 / 위치검색 / 사용자 검색 등의 팝업

<주소검색>

<주소 검색 실시간 결과값>

<결과값 선택>

4. Page Popup

사용자가 많은 정보를 입력해야 하는 팝업입니다. 전체 웹 페이지 기준으로 높이 전체를 사용하고 있습니다. 상단 타이틀 영역과 하단 버튼 영역은 고정으로 스크롤이 작용하지 않습니다. 컨텐츠 영역만 스크롤이 적용되는 구조입니다. 정보 입력 팝업

<페이지 팝업 예시>

5. Textballoons Popup

간단한 안내 문구나 캘린더 등에서 빠른 정보전달 및 액션에 사용 되어지는 말풍선 형태의 팝업입니다. 캘린더 같은 경우에 사용자의 액션을 반영하여 결과값을 얻을 수 있습니다. 안내문구(Tooltip) / 캘린더 / 기타 정보 확인 / 알림

<Tooltip>

<action>

<calendar>

<shadow guide>