JAY DESIGN

Default popup

Popup Default popup

*실제 모든 팝업 백그라운드 영역은 브라우저 전체 화면 사이즈이나, 예시 화면에서만 예시 영역 사이즈로 보여줌. 보통 팝업은 html 최 하단에 위치시킨다.

팝업 - alert

기본값은 <div class="popup active"> 에서 active 클래스를 제거한다. 팝업이 생성될때 active 클래스를 추가한다. 팝업닫기버튼( .popup__close ), 팝업배경( .popup__bg ), 팝업 확인버튼( .popup__exit )를 클릭하면 팝업 active 클래스를 제거하며 팝업이 사라진다.

<div class="popup popup--alert active">
    <div class="popup__wrap">
        <div class="popup__box">
            <button type="button" class="popup__close icon-only icon-x"></button>
            <div class="pop__message pop__message--center">
                <span class="pop-icon icon-info"></span>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            <button type="button" class="popup__exit btn btn--sm btn--primary spacing--xs">확인</button>
        </div>
        <div class="popup__bg"></div>
    </div>
</div>

팝업 - prompt

<div class="popup popup--xs active">
    <div class="popup__wrap">
        <div class="popup__box">
            <div class="popup__head">
                <div class="popup__title">
                    <p>Popup Title</p>
                </div>
                <button type="button" class="popup__close icon-only icon-x"></button>    
            </div>
            <div class="popup__body">
                <div class="pop__message">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
            <div class="popup__btns btns">
                <button type="button" class="popup__exit btn btn--sm btn--primary btn--outline icon-x">취소</button>
                <button type="button" class="popup__exit btn btn--sm btn--primary icon-check">확인</button>
            </div>
        </div>
        <div class="popup__bg"></div>
    </div>
</div>

팝업 - small

<div class="popup popup--sm active">
    <div class="popup__wrap">
        <div class="popup__box">
            <div class="popup__head">
                <div class="popup__title">
                    <p>Popup Title</p>
                </div>
                <button type="button" class="popup__close icon-only icon-x"></button>    
            </div>
            <div class="popup__body">
            </div>
            <div class="popup__btns btns">
                <button type="button" class="popup__exit btn btn--sm btn--primary btn--outline icon-x">취소</button>
                <button type="button" class="popup__exit btn btn--sm btn--primary icon-check">확인</button>
            </div>
        </div>
        <div class="popup__bg"></div>
    </div>
</div>

팝업 - medium

<div class="popup popup--md active">
    <div class="popup__wrap">
        <div class="popup__box">
            <div class="popup__head">
                <div class="popup__title">
                    <p>Popup Title</p>
                </div>
                <button type="button" class="popup__close icon-only icon-x"></button>    
            </div>
            <div class="popup__body">
            </div>
            <div class="popup__btns btns">
                <button type="button" class="popup__exit btn btn--sm btn--primary btn--outline icon-x">취소</button>
                <button type="button" class="popup__exit btn btn--sm btn--primary icon-check">확인</button>
            </div>
        </div>
        <div class="popup__bg"></div>
    </div>
</div>

팝업 - large

<div class="popup popup--lg active">
    <div class="popup__wrap">
        <div class="popup__box">
            <div class="popup__head">
                <div class="popup__title">
                    <p>Popup Title</p>
                </div>
                <button type="button" class="popup__close icon-only icon-x"></button>    
            </div>
            <div class="popup__body">
            </div>
            <div class="popup__btns btns">
                <button type="button" class="popup__exit btn btn--sm btn--primary btn--outline icon-x">취소</button>
                <button type="button" class="popup__exit btn btn--sm btn--primary icon-check">확인</button>
            </div>
        </div>
        <div class="popup__bg"></div>
    </div>
</div>