jdPopup API
- IE9~ 호환.
- 웹/모바일 옵션 분리 처리.
HTML
- 레이어팝업 이동을 위한 버튼에 data-layer-id의 값을 레이어팝업 ID와 동일하게 부여.
<button type="button" data-layer-id="layer1">레이어팝업 열기</button>
- 딤드는 dimmedEl 옵션에 부여한 값으로 클래스 설정.
<div class="dimmed"></div>
- 레이어팝업은 id를 꼭 부여해야하며, 레이어팝업 닫기 버튼은 closeEl 옵션에 부여한 값으로 클래스 설정.
닫기 CSS
- 기본구조
JS
- 반응형 기본구조
var layer = '#layer1' isDimmed: true isFixed: false turningPoint: 768 responsive: isFixed: true ;- 옵션값
| 속 성 | 내 용 | 기본값 | 타 입 |
|---|---|---|---|
| delegateTarget | 공통 이벤트 객체 셀렉터 | document | document 혹은 CSS selectors |
| containerEl | 레이어팝업 고정 시 노출되는 영역 셀렉터 | '.layout' | CSS selectors |
| innerEl | 레이어팝업 내 내용 및 버튼 등을 감싸는 셀렉터 | '.layer-pop-inner' | CSS selectors |
| closeEl | 레이어팝업 내 닫기 버튼 셀렉터 | '.btn-close' | CSS selectors |
| dimmedEl | 배경 마스크 셀렉터 | '.dimmed' | CSS selectors |
| setClass | 노출/미노출에 따른 class 속성 지정 | 'on' | classname |
| chainAttr | 레이어팝업과 연결시킬 버튼 data 속성 | 'data-layer-id' | data attribute |
| scrollTopDataAttr | 현재 스크롤 위치를 저장시킬 data 속성 | 'data-st' | data attribute |
| a11z | 접근성 적용 여부 | true | boolean |
| isDimmed | 배경 마스크 노출 여부 | false | boolean |
| isFixed | 레이어팝업 노출 시 스크롤 고정 여부 | false | boolean |
| onStart | 레이어팝업 노출 시 transitionstart | function | |
| onEnd | 레이어팝업 노출 시 transitionend | function | |
| offStart | 레이어팝업 미노출 시 transitionstart | function | |
| offEnd | 레이어팝업 미노출 시 transitionend | function | |
| turningPoint | responsive 옵션 설정 시 분기 사이즈 | 768 | number |
| responsive | 뷰 사이즈가 turningPoint 이하인 경우 옵션값 설정 | object |
- 기능
| 설명 | 메서드 | param | example |
|---|---|---|---|
| 이벤트 초기화 | .event | false | layer.event(false) |
| 이벤트 재설정 | .event | true | layer.event(true) |
| class 추가 | .add | element | layer.add(document.querySelector('.dimmed') |
| class 제거 | .remove | element | layer.remove(document.querySelector('.dimmed') |
| 레이어팝업 노출 | .on | layer.on() | |
| 레이어팝업 미노출 | .off | layer.off() |