높이값 100% 모달

<button type="button" class="guide-btn" data-modal-trigger="modal1">모달 호출</button>

<!-- [data-modal-trigger]와 [data-modal]의 id값이 일치 해야함. -->
<div id="modal1" class="ly-modal full" data-modal>
    <!-- role, aria-labelledby, aria-describedby 스크립트로 부여됨. -->
    <div class="ly-modal-wrap">
        <!-- header에 id가 없으면 스크립트로 부여됨. -->
        <header class="ly-modal-header">
            <h1 class="ly-modal-title">모달 타이틀</h1>
            <button type="button" class="ly-modal-close" data-modal-close><span class="blind">닫기</span></button>
        </header>
        <!-- content에 id가 없으면 스크립트로 부여됨. -->
        <div class="ly-modal-content">
            <button type="button" class="guide-btn" data-modal-trigger="modal2">모달 트리거2</button>
            내용
        </div>
    </div>
</div>

중앙 정렬 모달

bottom 모달

헤더 부분을 일정 수치만큼(80px) 내리면 닫히는 bottom 모달

모바일에서만 가능(touch event)

애니메이션 효과 없는 모달

dim 영역 클릭해도 닫히지 않는 모달

시점에 따른 이벤트

document.querySelectorAll('[data-modal]').forEach(function (el) {
    /* e.trigger: [data-modal-trigger]
     * e.target: [data-modal]
     */
    // 열릴 때
    el.addEventListener('modal.showing', function (e) {
        console.log(e.target, e.trigger, 'showing');
    })
    // 열린 후
    el.addEventListener('modal.shown', function (e) {
        console.log(e.target, e.trigger, 'shown');
    })
    // 닫힐 때
    el.addEventListener('modal.hiding', function (e) {
        console.log(e.target, e.trigger, 'hiding');
    })
    // 닫힌 후
    el.addEventListener('modal.hidden', function (e) {
        console.log(e.target, e.trigger, 'hidden');
    })
})

Component 호출(feat. 비동기)

const modalEl = document.querySelector('#modal3');
const modal = new SKY.Modal(modalEl);

show 호출

modal.show();

hide 호출

modal.hide();

hideAll 호출 (열린 modal 전부 닫기)

SKY.Modal.hideAll();