[javascript/jQuery/bootstrap4] 메시지Modal 커스텀.

메시지의 종류는 총 3가지다.

- 타임메시지: 지정한 시간(초)만큼 보였다가 사라지는 메시지.

- 일반메시지: 닫기 버튼을 눌러야 사라지는 메시지. (showAlertCall()을 사용할 경우 컨펌메시지처럼 닫기 후 실행될 함수 불러올 수 있음.)

- 컨펌메시지: 확인 버튼을 클릭 시, 특정 함수 실행.

 

    

        

            

                
제목입니다.
                
                
            
            

                내용입니다.
            
            


            
        
    




    

        

            

                
제목입니다.
                
            
            

                내용입니다.
            
            

                
                
            
        
    




    

        

            

                
제목입니다.
                
            
            

                내용입니다.
            
            

                
            
        
    

 

 

 

let timeAlInterval;

let confirmFuncName;
let confirmParams;

let closeFuncName;
let closeParams;

$(document).ready(function() {
	let confirmModalOK = document.querySelector("#confirmModalOK");
	let alertModalClose = document.querySelector("#alertModalClose");

	if(confirmModalOK != undefined){
		confirmModalOK.addEventListener("click", function(){
			$("#confirmModal").modal("hide");
			if(confirmFuncName != undefined){
				let confirmFuncObj = getFunctionFromString(confirmFuncName);
				confirmFuncObj(confirmParams);
				confirmFuncName = null;
				confirmParams = null;
			}
		});
	}

	if(alertModalClose != undefined){
		alertModalClose.addEventListener("click", function(){
			$("#alertModal").modal("hide");
			if(closeFuncName != undefined){
				let closeFuncObj = getFunctionFromString(closeFuncName);
				closeFuncObj(closeParams);
				closeFuncName = null;
				closeParams = null;
			}
		});
	}

});

/*
 * String -> Function Object
 */
function getFunctionFromString(string) {
	var scope = window;
	var scopeSplit = string.split('.');
	for(i = 0; i < scopeSplit.length - 1; i++) {
		scope = scope[scopeSplit[i]]; // window[첫번째인자]

		if(scope == undefined) return;
	}

	return scope[scopeSplit[scopeSplit.length - 1]]; // window[첫번째인자].두번째인자
}

/*
 * 타임메시지
 * title: 메시지 제목
 * msg: 메시지 내용
 * second: 메시지를 보여줄 시간(초), 값을
 * 넘기지 않는다면 기본은 1초.
 */
function showTimeAl(title, msg, second){
	if(second == undefined || second <= 0) second = 1;
	let timeAlSpan = document.querySelector("#timeAlSpan");
	timeAlSpan.innerHTML = "";
	document.querySelector("#timeAlModalTitle").innerHTML = title;
	document.querySelector("#timeAlModalMsg").innerHTML = msg;

	clearInterval(timeAlInterval);

	timeAlSpan.innerHTML = second + "초 후 닫힘";
	timeAlInterval = setInterval(function() {
		let timerTxt = (--second) + "초 후 닫힘";
		timeAlSpan.innerHTML = timerTxt;
		if(second == 0)
			$("#timeAlModal").modal("hide");
	}, 1000);

	$("#timeAlModal").modal("show");
}

/*
 * 일반 메시지
 * title: 메시지 제목
 * msg: 메시지 내용
 * flag: "e"일 경우, 제목 글씨를 빨간색으로 변경.
 */
function showAlert(title, msg, flag) {
	let alertModalTitle = document.querySelector("#alertModalTitle");
	if(flag == "e") alertModalTitle.classList.add("text-danger");

	document.querySelector("#alertModalTitle").innerHTML = title;
	document.querySelector("#alertModalMsg").innerHTML = msg;
	$("#alertModal").modal("show");
}

/*
 * 일반 메시지
 * title: 메시지 제목
 * msg: 메시지 내용
 * funcName: 확인 버튼을 누르면 실행될 함수명
 * paramArray: 확인 버튼을 누르면 실행될 함수의 매개변수 (array)
 * flag: "e"일 경우, 제목 글씨를 빨간색으로 변경.
 */
function showAlertCall(title, msg, funcName, paramArray, flag) {
	let alertModalTitle = document.querySelector("#alertModalTitle");
	if(flag == "e") alertModalTitle.classList.add("text-danger");

	document.querySelector("#alertModalTitle").innerHTML = title;
	document.querySelector("#alertModalMsg").innerHTML = msg;

	closeFuncName = funcName;
	closeParams = paramArray;

	$("#alertModal").modal("show");
}

/*
 * 컨펌 메시지
 * title: 메시지 제목
 * msg: 메시지 내용
 * funcName: 확인 버튼을 누르면 실행될 함수명
 * paramArray: 확인 버튼을 누르면 실행될 함수의 매개변수 (array)
 */
function showConfirm(title, msg, funcName, paramArray) {
	document.querySelector("#confirmModalTitle").innerHTML = title;
	document.querySelector("#confirmModalMsg").innerHTML = msg;

	confirmFuncName = funcName;
	confirmParams = paramArray;

	$("#confirmModal").modal("show");
}