- Home
- 테마 컴포넌트
- Mobile
- Layer
Layer
- 레이어팝업, 팝업 사용 예제를 제공합니다.
팝업
기본형
새로운 윈도우창이 노출될 때 사용합니다. body에 class="popup"이 선언되어 있습니다.
콘텐츠의 양이 지정된 팝업/레이어팝업의 영역을 초과할 경우, 자동으로 스크롤 바가 생깁니다.
xxxxxxxxxx1
<div class="ec-base-layer">2
<h1>제목</h1>3
<div class="wrap">4
콘텐츠 영역5
</div>6
<div class="ec-base-button"></div>7
<button type="button" class="btnClose" onclick="window.close()">닫기</button>8
</div>레이어 팝업
기본형
화면 내 노출되는 레이어팝업 가이드입니다. body에 class="layer"가 선언되어 있습니다.
콘텐츠의 양이 지정된 팝업/레이어팝업의 영역을 초과할 경우, 자동으로 스크롤 바가 생깁니다.
화면을 가득채우며 노출됩니다.
xxxxxxxxxx1
<div class="ec-base-layer">2
<h1>제목</h1>3
<div class="wrap">4
콘텐츠 영역5
</div>6
<div class="ec-base-button"></div>7
<button type="button" class="btnClose">닫기</button>8
</div>모달형
화면 내 노출되는 레이어팝업 가이드입니다. body에 class="layer"가 선언되어 있습니다.
여백을 가지며, 화면중앙에 노출됩니다.
xxxxxxxxxx1
<div class="ec-base-layer typeModal">2
<h1>제목</h1>3
<div class="wrap">4
콘텐츠 영역5
</div>6
<div class="ec-base-button"></div>7
<button type="button" class="btnClose">닫기</button>8
</div>와이드형
화면 내 노출되는 레이어팝업 가이드입니다. body에 class="layer"가 선언되어 있습니다.
레이아웃이 전체적으로 사이즈업됩니다.
xxxxxxxxxx1
<div class="ec-base-layer typeWide">2
<h1>제목</h1>3
<div class="wrap">4
콘텐츠 영역5
</div>6
<div class="ec-base-button"></div>7
<button type="button" class="btnClose">닫기</button>8
</div>그리드
그리드 정렬
콘텐츠가 보여지는 영역의 범위를 전체영역으로 잡고 싶을때 사용합니다.
전체영역(콘텐츠 영역) 및 스크롤 범위와 하단에 있는 버튼의 위치는 콘텐츠 길이(양)에 따라 변하게 됩니다.
xxxxxxxxxx1
<div class="ec-base-layer gClearFlex">2
<h1>제목</h1>3
<div class="wrap">4
콘텐츠 영역5
</div>6
<div class="ec-base-button"></div>7
<button type="button" class="btnClose">닫기</button>8
</div>활용
테마
팝업, 레이어팝업의 배경색(bg)을 흰색으로 변경할 때 사용합니다.
xxxxxxxxxx1
<div class="ec-base-layer theme1">2
<h1>제목</h1>3
<div class="wrap">4
콘텐츠 영역5
</div>6
<div class="ec-base-button"></div>7
<button type="button" class="btnClose">닫기</button>8
</div>다음 문서
이 페이지가 얼마나 도움이 되었나요?
0자 입력 /최대 300자