<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="layout_modal">
<div id="modalBox"></div>

<script>
let viewScrollY = 0;

//success Modal 셋팅
function fn_setSuccessModal(targetId){
	let successModalHTML = '';
    successModalHTML += '<div class="modal fade success" id="'+targetId+'" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">';
    successModalHTML += '    <div class="modal-dialog">';
    successModalHTML += '        <div class="modal-content">';
    successModalHTML += '            <div class="modal-body">';
    successModalHTML += '                <p class="title"></p>';
    successModalHTML += '                <p class="text"></p>';
    successModalHTML += '            </div>';

    successModalHTML += '            <div class="modal-footer">';
    successModalHTML += '                <button type="button" class="check_bth btn-Success">확인</button>';
    successModalHTML += '            </div>';
    successModalHTML += '        </div>';
    successModalHTML += '    </div>';
    successModalHTML += '</div>';
	
	$("#modalBox").append(successModalHTML);
	
	if(''==viewScrollY){
		viewScrollY = pageYOffset;
	}
	
	//$('.content_wrap .center').attr('style','top:-'+viewScrollY+'px');
	
	document.body.style.overflow = 'hidden';
}

//danger Modal 셋팅
function fn_setDangerModal(targetId){
	let dangerModalHTML = '';
    dangerModalHTML += '<div class="modal fade danger" id="'+targetId+'" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">';
    dangerModalHTML += '    <div class="modal-dialog">';
    dangerModalHTML += '        <div class="modal-content">';
    dangerModalHTML += '            <div class="modal-body">';
    dangerModalHTML += '                <p class="text"></p>';
    dangerModalHTML += '            </div>';

    dangerModalHTML += '            <div class="modal-footer">';
    dangerModalHTML += '                <button type="button" class="check_bth btn-Success">확인</button>';
    dangerModalHTML += '            </div>';
    dangerModalHTML += '        </div>';
    dangerModalHTML += '    </div>';
    dangerModalHTML += '</div>';
	
	$("#modalBox").append(dangerModalHTML);
	
	if(''==viewScrollY){
		viewScrollY = pageYOffset;
	}
	
	//$('.content_wrap .center').attr('style','top:-'+viewScrollY+'px');
	
	document.body.style.overflow = 'hidden';
}

//warning Modal 셋팅
function fn_setWarningModal(targetId){
	let warningModalHTML = '';
    warningModalHTML += '<div class="modal fade warning" id="'+targetId+'" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">';
    warningModalHTML += '    <div class="modal-dialog">';
    warningModalHTML += '        <div class="modal-content">';
    warningModalHTML += '            <div class="modal-body">';
    warningModalHTML += '                <p class="text"></p>';
    warningModalHTML += '            </div>';

    warningModalHTML += '            <div class="modal-footer">';
    warningModalHTML += '                <button type="button" class="check_bth btn-Success">확인</button>';
    warningModalHTML += '            </div>';
    warningModalHTML += '        </div>';
    warningModalHTML += '    </div>';
    warningModalHTML += '</div>';
	
	$("#modalBox").append(warningModalHTML);
	
	if(''==viewScrollY){
		viewScrollY = pageYOffset;
	}
	
	//$('.content_wrap .center').attr('style','top:-'+viewScrollY+'px');
	
	document.body.style.overflow = 'hidden';
}

//info Modal 셋팅
function fn_setInfoModal(targetId){
	let infoModalHTML = '';
	infoModalHTML += '<div class="modal fade info" id="'+targetId+'" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">';
	infoModalHTML += '    <div class="modal-dialog">';
	infoModalHTML += '        <div class="modal-content">';
	infoModalHTML += '            <div class="modal-body">';
	infoModalHTML += '                <p class="text"></p>';
	infoModalHTML += '            </div>';
	
	infoModalHTML += '            <div class="modal-footer">';
	infoModalHTML += '                <button type="button" class="cancel_btn btn-cancel">취소</button>';
	infoModalHTML += '                <button type="button" class="check_bth btn-Success">확인</button>';
	infoModalHTML += '            </div>';
	infoModalHTML += '        </div>';
	infoModalHTML += '    </div>';
	infoModalHTML += '</div>';
	
	$("#modalBox").append(infoModalHTML);
	
	if(''==viewScrollY){
		viewScrollY = pageYOffset;
	}
	
	//$('.content_wrap .center').attr('style','top:-'+viewScrollY+'px');
	
	document.body.style.overflow = 'hidden';
}

//팝업
let modalEvent = {
	open : function(target, tit, msg){
		if(target.length < 1){
			throw new Error("there is no target element !");
		}
		
		// msg를 문자열로 안전하게 변환
	    let safeMsg = (msg != null && msg !== undefined) ? String(msg) : '';
	    let enterMsg = safeMsg.replace(/\r?\n/g, '<br>');
	    
	    target.find(".modal-body>.text").html(enterMsg);
	    console.log(target);
	    console.log(tit);
	    console.log(msg);
	    target.modal({keyboard:false, backdrop:'static'});
	},
	close : function(target){
		//팝업 지우기
		//target.modal("hide");
		//target.parent().remove();
		
		//body css 변경
		document.body.style.overflow = 'initial';
		//기존 top css 변경
		//$('.content_wrap .center').attr('style','top:0px');
		//스크롤 위치로 자리 이동
		window.scrollTo( 0, viewScrollY);
		//변수 초기화
		viewScrollY = 0;
		
		modalArr.pop();
		
		/* if('N'==modalBackYn){
			window.history.back();
		} */
		
		$("#modalBox .modal").modal("hide");
		
		// $("#modalBox").children().remove();  // 삭제 확인 필요
	},
	backClose : function(target){
		//팝업 지우기
		//target.modal("hide");
		//target.parent().remove();
		
		//body css 변경
		document.body.style.overflow = 'initial';
		//기존 top css 변경
		//$('.content_wrap .center').attr('style','top:0px');
		//스크롤 위치로 자리 이동
		window.scrollTo( 0, viewScrollY);
		//변수 초기화
		viewScrollY = 0;
		
		$("#modalBox .modal").modal("hide");
		
		modalArr.pop();
		// $("#modalBox").children().remove();  // 삭제 확인 필요
	},
	success : function(tit, msg, callback){
		//alert 팝업
		//$(".modal_success .btn-Success").unbind("click");
		
		if($("#modalBox > .popupColored").length > 0){
			modalEvent.close();
		}
		
		// 모달 아이디 생성
		let nowMilli = Date.now();
		let targetId = "modal_success"+nowMilli;
		
		// 모달 셋팅
		fn_setSuccessModal(targetId);
		
		// 현재 모달 설정
		let target = $("#"+targetId);
		
		// 모달 열기
		modalEvent.open(target, tit, msg);
		
		// 모달 이벤트
		$("#"+targetId+" .btn-Success").click(function(e){
			modalEvent.close();
			
			if(typeof callback != 'undefined' && callback){
				if(typeof callback == 'function'){
					callback();
				}
				else {
					if( callback ) {
						eval( callback );
					}
				}
			} 
		});
	},
	danger : function(tit, msg, callback){
		//alert 팝업
		//$(".modal_danger .btn-Success").unbind("click");
		
		if($("#modalBox > .popupColored").length > 0){
			modalEvent.close();
		}
		
		// 모달 아이디 생성
		let nowMilli = Date.now();
		let targetId = "modal_danger"+nowMilli;
		
		// 모달 셋팅
		fn_setDangerModal(targetId);
		
		// 현재 모달 설정
		let target = $("#"+targetId);
		
		// 모달 열기
		modalEvent.open(target, tit, msg);
		
		// 모달 이벤트
		$("#"+targetId+" .btn-Success").click(function(e){
			modalEvent.close();
			
			if(typeof callback != 'undefined' && callback){
				if(typeof callback == 'function'){
					callback();
				}
				else {
					if( callback ) {
						eval( callback );
					}
				}
			} 
		});
	},
	warning : function(tit, msg, callback){
		//alert 팝업
		//$(".modal_warning .btn-Success").unbind("click");
		
		if($("#modalBox > .popupColored").length > 0){
			modalEvent.close();
		}
		
		// 모달 아이디 생성
		let nowMilli = Date.now();
		let targetId = "modal_warning"+nowMilli;
		
		// 모달 셋팅
		fn_setWarningModal(targetId);
		
		// 현재 모달 설정
		let target = $("#"+targetId);
		
		// 모달 열기
		modalEvent.open(target, tit, msg);
		
		// 모달 이벤트
		$("#"+targetId+" .btn-Success").click(function(e){
			
			modalEvent.close();
			
			if(typeof callback != 'undefined' && callback){
				if(typeof callback == 'function'){
					callback();
				}
				else {
					if( callback ) {
						eval( callback );
					}
				}
			} 
		});
	},
	info : function(tit, msg, callback, callback2){
		//alert 팝업
		//$(".modal_info .btn-Success").unbind("click");
		
		if($("#modalBox > .popupColored").length > 0){
			modalEvent.close();
		}
		
		// 모달 아이디 생성
		let nowMilli = Date.now();
		let targetId = "modal_info"+nowMilli;
		
		// 모달 셋팅
		fn_setInfoModal(targetId);
		
		// 현재 모달 설정
		let target = $("#"+targetId);
		
		// 모달 열기
		modalEvent.open(target, tit, msg);
		
		// 모달 확인 이벤트
		$("#"+targetId+" .btn-Success").click(function(e){
			
			modalEvent.close();
			
			if(typeof callback != 'undefined' && callback){
				if(typeof callback == 'function'){
					callback();
				} else {
					if( callback ) {
						eval( callback );
					}
				}
			} 
		});
		
		// 모달 취소 이벤트
		$("#"+targetId+" .btn-cancel").click(function(e){
			modalEvent.close();
			
			if(typeof callback2 != 'undefined' && callback2){
				if(typeof callback2 == 'function'){
					callback2();
				}
				else {
					if( callback2 ) {
						eval( callback2 );
					}
				}
			} 
		});
	}
}


// 다중 팝업 index 조정
$(document).on('show.bs.modal', '.modal', function (event) {
	let zIndex = 1040 + (10 * $('.modal:visible').length);
	$(this).css('z-index', zIndex);

	setTimeout(function() {
		$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
	}, 0);
});
</script>
</th:block>
</html>