라이브러리

modal

팝업관리
테스트입니다.
테스트입니다.
테스트입니다.
테스트입니다.
테스트입니다.
테스트입니다.

html

<!-- data-modal 값을 매칭시켜야 함 -->
<button type="button" onClick="modalOpen(this);" data-modal="modal">modal open</button>

<div class="popup-modal js-popup-modal" data-modal="modal">
    <div class="popup-modal-box">
        <div class="popup-modal-item" tabindex="0">
            <div class="popup-modal-header">팝업관리</div>
            <div class="popup-modal-body">테스트입니다.<br>테스트입니다.<br>테스트입니다.<br>테스트입니다.<br>테스트입니다.<br>테스트입니다.<br></div>
            <div class="popup-modal-footer">
            </div>
            <button type="button" class="popup-modal-close" onclick="modalClose(this);">닫기</button>
        </div>
    </div>
</div>

script

// 열린 팝업 카운트 -> css z-index 설정
let modalCount = 0;

// 팝업 열기
function modalOpen(btn) {
    const $thisModalName = $(btn).data("modal"),
        $thisModal = $(".js-popup-modal[data-modal='"+$thisModalName+"']");
    modalCount++;
    $thisModal.not($(btn)).addClass("active");
    $thisModal.css("z-index", "20"+modalCount);
    if($(".js-popup-modal-dimed").length > 0) return;
    $("body").css("overflow-y", "hidden").append("<div class='js-popup-modal-dimed popup-modal-dimed'></div>");
}

// 팝업 닫기
function modalClose(btn) {
    const $thisModal = $(btn).closest(".js-popup-modal");
    $thisModal.removeClass("active").css("z-index", 100);
    if($((".js-popup-modal.active")).length > 0) return; // 모달 팝업이 다중으로 오픈되어 있을 경우 return
    $(".js-popup-modal-dimed").remove();
    $("body").css("overflow-y", "auto");
}

css

.js-popup-modal {
    display: none;
}
.js-popup-modal.active {
    display: flex;
    display: -webkit-flex;
}
.popup-modal {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    padding:20px;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}
.popup-modal-box {
    width:100%;
    max-height: calc(100% - 20px);
    overflow-y: auto;
}
.popup-modal-item {
    background: #fff;
}
.popup-modal-dimed {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    cursor: pointer;
}