레이어 팝업

레이어 타입

// contents

타이틀

// contents

타이틀

// contents

타이틀

// contents

타이틀

// contents

타이틀

// contents

타이틀

// contents

타이틀

// contents

layer

<div class="layer-wrap" data-layer="layer-name">
    <div class="layer-container">
    </div>
</div>
data-layer="layer-name" 속성으로 해당 객체를 레이어 팝업으로 지정

auto close timer

<div class="layer-wrap" data-layer="layer-name" data-layer-timer-close="3000">
    <div class="layer-container">
    </div>
</div>
data-layer-timer-close="3000" 속성으로 레이어가 자동으로 닫히는 시간을 지정 1000 = 1초

focus to layer - disabled

<div class="layer-wrap" data-layer="layer-name" data-focus="false">
    <div class="layer-container">
    </div>
</div>
data-focus="false" 속성으로 레이어가 열릴 때 포커스 가게 하는 기능 비활성화

scroll block - disabled

<div class="layer-wrap" data-layer="layer-name" data-scroll-block="false">
    <div class="layer-container">
    </div>
</div>
data-scroll-block="false" 속성으로 레이어가 열릴 때 페이지 스크롤이 막히는 기능을 비활성화

cycle focus - disabled

<div class="layer-wrap" data-layer="layer-name" data-cycle-focus="false">
    <div class="layer-container">
    </div>
</div>
data-cycle-focus="false" 속성으로 레이어 포커스 순환 기능을 비활성화

opener

<a href="" data-layer-open="layer-name">레이어 열기</a>
data-layer-open="layer-name" 속성으로 대상 레이어 지정

closer

<button type="button" data-role="layerClose">레이어 닫기</button>
data-role="layerClose" 속성을 대상 레이어 안에 객체 중 아무거나에 넣어두면 그 객체가 닫기 버튼 기능을 함.

function

uiJSLayer.open('layer-name' [, opener] [, speed]);
스크립트로 별도로 레이어를 열 때 사용
opener : string | HTMLElement | jQuery Selector : 해당 레이어를 닫을 때 포커스가 돌아 갈 객체를 지정 (기본 값 : null)
speed : number : 레이어가 닫히는 애니메이션 속도 지정 (기본 값 : 350)
uiJSLayer.close('layer-name' [, speed]);
스크립트로 별도로 레이어를 닫을 때 사용
speed : number : 레이어가 닫히는 애니메이션 속도 지정 (기본 값 : 350)

event

$('[data-layer="layer-name"]').on('layerBeforeOpened', function(){...});
레이어가 열리기 직전에 발생
$('[data-layer="layer-name"]').on('layerOpened', function(){...});
레이어가 열릴 때 발생
$('[data-layer="layer-name"]').on('layerAfterOpened', function(){...});
레이어가 열리는 애니메이션이 끝난 후 발생
$('[data-layer="layer-name"]').on('layerBeforeClosed', function(){...});
레이어가 닫히기 직전에 발생
$('[data-layer="layer-name"]').on('layerClosed', function(){...});
레이어가 닫힐 때 발생
$('[data-layer="layer-name"]').on('layerAfterClosed', function(){...});
레이어가 닫히는 애니메이션이 끝난 후 발생