alert 메서드는 주로 경고창을 띄우는 용도로 많이 사용되고 있다. 하지만 고정된 디자인이다보니 UI 변경이 불가능하기때문에 이를 대체할 수 있는 jquery-confirm.js 라이브러리가 있는데 사용법도 간단하기 때문에 단순 alert 를 대체하기엔 가장 좋은 라이브러리가 아닌가 생각한다. 

물론 비슷한 라이브러리들이 많지만 confirm-jquery 라이브러리는 alert 뿐만 아니라 confirm 창 또는 dialog 와 같은 여러 기능들도 제공되기 때문에 다른 라이브러리 보다 유용하게 사용이 가능하다. 

이번에는 간단하게 jquery-confirm.js 에 대해 알아보자. 우선 jquery-confirm.js 는 아래 사이트에서 다운로드가 가능하다. 

| 포럼사이트 

| GITHUB(깃)

라이브러리를 다운로드 하면 사용할 수 있도록 사이트에 추가를 해주어야하는데 당연하게도 해당 라이브러리는 JQUERY 라이브러리가 필요하므로 함께 로드 해주어야 한다. 그리고 자동 디자인을 적용하기 위해 부트스트랩(BOTTSTRAP) 라이브러리도 함께 로드해주면 좋다. 

<!-- jquery -->
<script src="//code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<!-- bottstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<!-- jquery-confirm.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>

<script type="text/javascript">
	$.alert('Alert 창');
</script>

|결과

위와 같이 $.alert 메서드를 통해 간단하게 사용이 가능하다. 만약 버튼명을 변경하고 싶다면 아래와 같이 옵션과 함께 사용을 해야하는데 이는 상당히 유용하겠지만 매번 많은 코드를 입력해야 하므로 공통 사용을 위해서는 아래와 같이 별도 함수를 만들어서 적용해주는게 좋다. 

<script type="text/javascript">
	var $alert = function(msg,btnTitle){
		eval('var obj = {title:"",content:"'+msg+'",buttons:{"'+btnTitle+'":function(){}}}');
		$.alert(obj);
	}
	$alert('Alert 창','네 알겠습니다.');
</script>

jquery-confirm 기능의 경우 기본 옵션에 대한 전체설정 방법이 있는데 이는 아래와 같이 파일을 만들어서 로드해주면 된다. 

jconfirm.defaults = {
    title: 'Hello',
    titleClass: '',
    type: 'default',
    typeAnimated: true,
    draggable: true,
    dragWindowGap: 15,
    dragWindowBorder: true,
    animateFromElement: true,
    smoothContent: true,
    content: 'Are you sure to continue?',
    buttons: {},
    defaultButtons: {
        ok: {
            action: function () {
            }
        },
        close: {
            action: function () {
            }
        },
    },
    contentLoaded: function(data, status, xhr){
    },
    icon: '',
    lazyOpen: false,
    bgOpacity: null,
    theme: 'light',
    animation: 'scale',
    closeAnimation: 'scale',
    animationSpeed: 400,
    animationBounce: 1,
    rtl: false,
    container: 'body',
    containerFluid: false,
    backgroundDismiss: false,
    backgroundDismissAnimation: 'shake',
    autoClose: false,
    closeIcon: null,
    closeIconClass: false,
    watchInterval: 100,
    columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
    boxWidth: '50%',
    scrollToPreviousElement: true,
    scrollToPreviousElementAnimate: true,
    useBootstrap: true,
    offsetTop: 40,
    offsetBottom: 40,
    bootstrapClasses: {
        container: 'container',
        containerFluid: 'container-fluid',
        row: 'row',
    },
    onContentReady: function () {},
    onOpenBefore: function () {},
    onOpen: function () {},
    onClose: function () {},
    onDestroy: function () {},
    onAction: function () {}
};

위와 같이 전체설정 javascript 파일을 만들어 주고 아래와 같이 로드를 해주면 된다.  추가할때 반드시 가장 마지막에 추가해주어야한다. 

<!-- confirm-setting.js -->
<script src="./confirm-setting.js"></script>

추가로 alert 기능 이외 confirm 기능도 있는데 해당 기능은 javascript 에서 기본제공되는 confirm 기능과 다르게 버튼에 따른 액션을 구현해줘야할 뿐만 아니라 아래와 같이 흔히 사용하는 return 값을 받을 수 없고 별도 callback 함수를 통해 처리해야한다. 

만약 기본 javascript confirm 메서드를 이용하여 처리할 경우 우리는 아래와 같이 처리를 했을 것이다. 

<script type="text/javascript">
	if( confirm("종료하시게습니까?") == true){ /*내용*/ }
</script>

하지만 jquery-confirm 에서의 confirm 기능은 기본 javascript 의 confirm 처럼 return 값을 받을 수가 없다.  따라서 아래와 같이 콜백에 대한 처리를 해주어야 한다. 

<script type="text/javascript">
	var obj = {
		title:'',
		content:'종료하시겠습니까?',
		buttons:{
			"네": function(){
				$.alert("종료하셨습니다.");
			},
			"아니요":function(){}  /*내용이 없으면 닫는다*/
		}
	};
	$.confirm(obj);
</script>

하지만 confirm 기능을 사용할때마다 위의 코드를 입력해야한다면 익숙해 지기 전까지 사용하기가 매우 까다로울 수 있다. 따라서 공통사용할 함수를 생성하여 아래와 같이 기능을 확장할 수 있다.  

<!-- jquery -->
<script src="//code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<!-- bottstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<!-- jquery-confirm.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>

<!-- confirm-setting.js -->
<script src="./confirm-setting.js"></script>

<!-- 실행될 옵션정보를 세팅한다. -->
<code id="confirm-object" style="display: none;;">
	var obj = {
		title : '',
		content : '{msg}',
		buttons : {
			"확인" : function(){
				{okCallbackString}
			},
			"취소": function(){}			
		}
	}
</code>	
<code id="confirm-alert" style="display: none;;">
	var obj = {
		title : '',
		content : '{msg}',
		buttons : {
			"확인" : function(){}
		}
	}
</code>	

<script type="text/javascript">
	var $confirm = function(msg, okCallbackString){
		var objString = $('#confirm-object').html();
		objString = objString.replace(/{msg}/g,msg);
		if( typeof okCallbackString !== 'undefined'){
			objString = objString.replace(/{okCallbackString}/g,okCallbackString);
		}
		eval(objString);
		$.confirm(obj);
	}
	var $alert = function(msg){
		var objString = $('#confirm-alert').html();
		objString = objString.replace(/{msg}/g,msg);
		eval(objString);
		$.confirm(obj);
	}
	/*okCallback: 콜백받을 함수*/
	var localCallback = function(msg){
		$alert(msg);
	}
	$confirm('정말 종료하시겠습니까?','localCallback("종료하셨습니다.")');
</script>

이와 같이 code 태그를 이용하여 eval 에 적용될 스크립트를 지정해 주고 실행하면 된다.