[JQuery/Bootstrap]부트스트랩 Modal로 Alert,Confirm창 만들기(프로미스 사용)

안녕학세요 미나라이 입니다.

프로젝트를 진행하면서 Alert메세지를 이쁘게 써보자는 이야기가 나와서 Bootstrap Modal 기능을 이용해서 Alert,Confirm창을 꾸며 보았습니다.

Confirm Modal안에서 Alert Modal창을 띄우려고 할 때 타이밍이 안맞아서 첫번째 팝업창만 보이는 현상이 있었습니다.

setTimeout을 이용하는 방법도 있지만

이부분은 프로미스 기능을 이용해서 순차적으로 표시 할 수 있도록 수정 해 보았습니다.

대신 연속으로 Alert메세지 팝을 띄울 경우 Alert메세지의 확인 버튼을 누르면 다음 Alert메세지 창을 띄우는 효과는 구현하지 않았습니다.

주의사항

HTML과 Script는 공통 모듈을 호출하는 부분에 넣어주세요.

넣을 때 ID값이 중복되는 부분이 있는지 한번씩 확인 해 주세요.

HTML

제이쿼리, 부트스트랩을 링크시켜주어야 합니다.

<link rel="stylesheet" href="./bootstrap-4.5.0/css/bootstrap.min.css" >
<script src="./jquery/jquery-3.5.1.min.js"></script>
<script src="./bootstrap-4.5.0/js/bootstrap.min.js"></script>
<!-- Alert, Confirm Modal -->
<div class="modal" id="msg_popup" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <!-- MSG Space-->
            </div>
            <div class="modal-footer" id="btn_confirm">
                <button type="button" id="confirm_yes" class="btn btn-primary" data-dismiss="modal" >YES</button>
                <button type="button" id="confirm_no"class="btn btn-secondary" data-dismiss="modal">NO</button>
            </div>
            <div class="modal-footer" id="btn_alert">
                <button type="button" id="alert_ok"class="btn btn-primary" data-dismiss="modal" >OK</button>
            </div>
        </div>
    </div>
</div>

Script

var MsgBox = {
    /* Alert */
    Alert: function(msg, okhandler) {
        new Promise((resolve, reject) => {
            $("#msg_popup #btn_confirm").hide();
            $("#msg_popup #btn_alert").show();
            
            $("#msg_popup #alert_ok").unbind();
            $("#msg_popup .modal-body").html(msg);
            $('#msg_popup').modal('show');

            $("#msg_popup #alert_ok").click(function() {
                $('#msg_popup').modal('hide');
            });

            $("#msg_popup").on("hidden.bs.modal", function(e) {
                e.stopPropagation();
                if(okhandler != null) resolve();
                else reject();
            });
        }).then(okhandler).catch(function() {});
    },

    /* Confirm */
    Confirm: function(msg, yeshandler, nohandler) {
        new Promise((resolve, reject) => {
            var flag = false;
            $("#msg_popup #btn_alert").hide();
            $("#msg_popup #btn_confirm").show();
            
            $("#msg_popup #confirm_yes").unbind();
            $("#msg_popup #confirm_no").unbind();
            $("#msg_popup .modal-body").html(msg);
            $('#msg_popup').modal('show');

            $('#msg_popup').on('keypress', function (e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if(keycode == '13') {
                    flag = true;
                    $('#msg_popup').modal('hide');
                }
            });

            $("#msg_popup #confirm_yes").click(function() {
                flag = true;
            });
            $("#msg_popup #confirm_no").click(function() {
                flag = false;
            });

            $("#msg_popup").on("hidden.bs.modal", function(e) {
                e.stopPropagation();
                if(yeshandler != null && flag == true) resolve(1); 
                else if(nohandler != null && flag == false) resolve(2);
                else reject();
            });

        }).then(function(value) {
            if(value == 1)      yeshandler();
            else if(value == 2) nohandler();
        }).catch(function() {});
    },
}

사용 방법

위 스크립트와 HTML이 있는 파일을 링크시키고 아래와 같은 메세지로 호출 하면 됩니다.

Alert

메세지 팝업에서 OK버튼 클릭 및 창을 닫은 후에 콜백 함수를 넣고싶은 경우에는 2번째 인자에 콜백 함수를 넣어주면 됩니다.

// 콜백함수 있을 때
MsgBox.Alert("Alert Message!", function() {MsgBox.Alert("OK");});

// 콜백함수 없을 때
MsgBox.Alert("Alert Message!");

사용 결과

콜백 함수 넣었을 경우 OK버튼 누르면 해당 함수를 호출

Confirm

메세지 팝업에서 YES버튼 클릭 및 창을 닫은 후에 콜백 함수를 넣고싶은 경우에는 2번째 인자에 콜백 함수를 넣어주고 NO버튼을 닫은 후에 콜백 함수를 넣고 싶으면 3번째 인자에 콜백 함수를 넣어주면 됩니다.

// YES버튼에만 콜백 함수 넣을 경우
MsgBox.Confirm("Confirm Message!", function() {MsgBox.Alert("YES");});
// NO버튼에도 콜백 함수 넣을 경우
MsgBox.Confirm("Confirm Message!", function() {MsgBox.Alert("YES");} , function() {MsgBox.Alert("NO");});

사용 결과