다기능 다이얼로그 박스 또는 모달 창 (Dialog Box or Modal Window) - JavaScript

하나의 코드로 Confirm과 Alert 기능을 다 쓸 수 있는 다이얼로그 박스 (또는 모달 창) Dialog Box입니다. 하나의 코드로 다음의 세 가지 기능을 구현할 수 있습니다:

1. Alert 창
2. 콜백이 있는 Alert 창
3. 콜백이 있는 Confirm 창

이 코드를 만든 이유는 브라우저의 alert와 confirm 창이 디자인 적으로 아주 구리(?)다라는 생각이었고 bootstrap modal로 어떻게 하면 콜백을 첨가하여 브라우저의 창 같은 기능을 원하는 디자인으로 재구현 할 수 있을까였습니다.
 

반응형

---

우선 아래의 HTML 코드를 넣어줍니다. 아래의 코드는 Bootstrap의 모달 창 (Modal Dialog)을 변형 한 코드입니다. 디자인을 하기 위한 CSS 클래스는 각자 알아서 쓰시기 바랍니다 ^^;

<div class="modal" id="wndModal" tabindex="-1" aria-labelledby="wndModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 id="txtModalTitle"></h1>
                <button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="txtModalBody">
            </div>
            <div class="modal-footer" id="btnSectionAlert">
                <button type="button" data-bs-dismiss="modal" id="btnClose">닫기</button>
            </div>
            <div class="modal-footer" id="btnSectionConfirm1B">
                <button type="button" data-bs-dismiss="modal" id="btnClose1B">닫기</button>
            </div>
            <div class="modal-footer" id="btnSectionConfirm2B">
                <button type="button" data-bs-dismiss="modal" id="btnYes">예</button>
                <button type="button" data-bs-dismiss="modal" id="btnNo">아니오</button>
            </div>
        </div>
    </div>
</div>

위의 HTML Markup 코드는 다음의 세 가지 기능이 있습니다:

1. Alert 창 - btnSectionAlert 가 보이고 닫을 수 있습니다.
2. 콜백이 있는 Alert 창 - btnSectionConfirm1B 가 보이고 '닫기' 버튼을 누르면 콜백 함수가 발동됩니다.
3. 콜백이 있는 Confirm 창 - btnSectionConfirm2B 가 보이고 '예' 버튼을 누르면 콜백 함수가 발동됩니다.

---

다음은 아래의 JavaScript 코드를 넣습니다. 참고로 이 코드는 jQuery를 이용하여 DOM element를 변형합니다.

function showDialog(modalType, modalTitle, modalBodyContent, callbackFn) {
    // 타이틀
    $('#txtModalTitle').text(modalTitle);
    
    // 바디 - Dialog Body in HTML Markup 
    $('#txtModalBody').html(modalBodyContent);
    
    // 버튼 섹션
    if (modalType == 'alert') {
        // ALERT
        $('#btnSectionConfirm2B').hide();
        $('#btnSectionConfirm1B').hide();
        $('#btnSectionAlert').show();

        $('#wndModal').modal('show');
    }
    else if (modalType == 'alertcallback') {
        // ALERT WITH 1 BUTTON CALLBACK
        $('#btnSectionAlert').hide();
        $('#btnSectionConfirm2B').hide();
        $('#btnSectionConfirm1B').show();

        var result = false;
        // 1 버튼 콜백 함수 지정
        modalConfirm1B(function() {
            callbackFn();
        });
    }
    else {
        // CONFIRM WITH 2 BUTTON CALLBACK
        $('#btnSectionAlert').hide();
        $('#btnSectionConfirm1B').hide();
        $('#btnSectionConfirm2B').show();

        var result = false;
        // 2 버튼 콜백 함수 지정
        modalConfirm2B(function(button) {
            if (button == 1) {
                result = true;
                callbackFn(result);
            } else if (button == 2) {
                result = false;
                callbackFn(result);
            }
        });
    }
}

 

728x90

---

그 후에 아래와 같이 콜백 함수를 불러오는 코드 블록이 필요합니다.

// MODAL CONFIRM CALLBACK CONSTRUCTOR - 1 BUTTON
var modalConfirm1B = function (callback){
    $("#wndModal").modal("show");

    // 버튼 클릭 이벤트
    $("#btnClose1B").on("click", function () {
        // 위 함수 중 modalConfirm1B의 function() 부분이 여기서 사용됩니다 
        callback();
        $("#wndModal").modal('hide');
    });
};

// MODAL CONFIRM CALLBACK CONSTRUCTOR - 2 BUTTONS
var modalConfirm2B = function (callback){
    $("#wndModal").modal("show");

    // Yes 버튼 클릭 이벤트
    $("#btnYes").on("click", function () {
    	// 위 함수 중 modalConfirm2B의 function(button) 부분이 여기서 사용됩니다 => button = 1 
        callback(1);
        $("#wndModal").modal('hide');
    });

    // No 버튼 클릭 이벤트
    $("#btnNo").on("click", function () {
    	// 위 함수 중 modalConfirm2B의 function(button) 부분이 여기서 사용됩니다 => button = 2
        callback(2);
        $("#wndModal").modal('hide');
    });
};

---

마지막으로 showDialog 함수에서 button 누른 후 result의 값으로 페러미터로 보냈던 콜백 함수가 발동이 되죠. 아래는 showDialog을 부르는 예제입니다.

Alert

showDialog('alert', '이메일 유저 확인', '중복된 유저가 존재합니다');

---

콜백이 있는 Alert

showDialog(
    'alertcallback', 
    '유저 중복 확인', 
    '중복된 유저가 존재합니다', 
    function() {
    	//여기에 콜백 함수를 정의 함
    }
);

---

Confirm

showDialog(
    'confirm', 
    '유저 중복 확인', 
    '중복된 유저가 존재합니다', 
    function(result) {
        //여기에 result (true or false - 예 아니오 버튼)를 이용하여 콜백 함수를 정의 함
        if (result) {
            // 예 버튼
        }
        else {
            // 아니오 버튼
        }
    }
);

---

수고하셨습니다. 즐거운 코딩되세요!

---

도움이 되셨거나 즐거우셨다면 아래의 ❤️공감버튼이나 구독버튼을 눌러 주세요~  감사합니다