라이브러리
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;
}