jd-popup v0.1.1

jdPopup API

• IE9~ 호환.
• 웹/모바일 옵션 분리 처리.

HTML

• 레이어팝업 이동을 위한 버튼에 data-layer-id의 값을 레이어팝업 ID와 동일하게 부여.

<button type="button" data-layer-id="layer1">레이어팝업 열기</button>

• 딤드는 dimmedEl 옵션에 부여한 값으로 클래스 설정.

<div class="dimmed"></div>

• 레이어팝업은 id를 꼭 부여해야하며, 레이어팝업 닫기 버튼은 closeEl 옵션에 부여한 값으로 클래스 설정.

<div id="layer1" class="layer-pop">
    <div class="layer-pop-inner">
        <button type="button" class="btn-close">닫기</button>
    </div>
</div>

CSS

• 기본구조

.dimmed{visibility:hidden;position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;background-color:rgba(0,0,0,.3);opacity:0;}
.dimmed.on{visibility:visible;opacity:1;}
.layer-pop{visibility:hidden;position:absolute;top:0;left:50%;transform:translate(-50%,0);opacity:0;}
.layer-pop.on{visibility:visible;opacity:1;}
.layer-pop .layer-pop-inner{width:100%;height:100%;}

JS

• 반응형 기본구조

var layer = new JdPopup('#layer1', {
    isDimmed: true,
    isFixed: false,
    turningPoint: 768,
    responsive: {
        isFixed: true
    }
});

• 옵션값

• 기능