[UI] 화면 중앙에 레이어 띄우기 (floating layer)

Layer

레이어는 css :target 셀렉터와 opacity 속성을 이용하여 css만으로 구현이 가능하다.
간단한 레이어 팝업의 경우에는 해당 방법으로 구현하는 것이 리소스 요청을 줄일 수 있어 좋다.
이 스니핏은 스크립트와 함께 작동하는 방식의 레이어를 표현한다.
화면 고정식 기본 팝업 레이어와 플로우 레이어, 토글식 레이어, 레이어 닫기(닫기 버튼 클릭시 닫기, 딤레이어 클릭시 닫기)등을 구현하였다.

1. Component

1) open layer

• .btn-layer : 레이어를 팝업시키기 위해 클릭하는 링크, 버튼 요소에 사용. data-layer 어트리뷰트를 지정하여 해당 값의 id를 가진 레이어를 열도록 함.
• .focus-layer : 레이어를 팝업시키 위해 포커싱하는 input 요소에 사용

2) close layer

.layer-close, .layer-dim
해당 클래스의 요소를 클릭하면 상위에 위치한 layer의 디스플레이를 해제한다.

2. Case

1) default layer (fixed layer)

레이어 팝업링크 클릭시 레이어가 화면 중앙에 표시되도록 한다.

<div class="layer">
    <div class="layer-dim"></div>
    <div class="layer-window"></div>
</div>

2) flow layer

레이어 팝업링크 클릭시 레이어가 팝업링크 바로 밑에 뜨도록 한다.

<div class="layer-wrap>
    <a href="#" class="btn-layer">레이어 팝업</a>
    <div class="layer layer-flow">
        <div class="layer-window"></div>
    </div>
</div>

---

수정 및 재배포 금지. 사용시 링크를 표시해주세요.

​