Easily Create a Modal Dialog Box with Callbacks - JavaScript

With one block of codes, you can create a modal Alert and Confirm dialog box with callbacks.  It has the following functions:

1. Alert Dialog Box (without a callback)
2. Alert Dialog Box (with a callback)
3. Confirm Dialog Box (with callbacks - yes and no)

The reason I created this code was that the alert and confirm windows in a browser is not customizable and their design is from the stone age.  The code below is based on the Bootstrap Modal Dialog Box.
 

728x90

---

Insert the code below.  The code below is the customized version of Bootstrap Modal Dialog Box.  You will need to play with CSS classes to design the dialog box as your needs.

<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">Close</button>
            </div>
            <div class="modal-footer" id="btnSectionConfirm1B">
                <button type="button" data-bs-dismiss="modal" id="btnClose1B">Close</button>
            </div>
            <div class="modal-footer" id="btnSectionConfirm2B">
                <button type="button" data-bs-dismiss="modal" id="btnYes">Yes</button>
                <button type="button" data-bs-dismiss="modal" id="btnNo">No</button>
            </div>
        </div>
    </div>
</div>

The following explains the code above:

1. Alert without a callback - btnSectionAlert will be shown.
2. Alert with a callback - btnSectionConfirm1B will be shown and the callback function will be triggered when Close button is pressed.
3. Confirm with callbacks - btnSectionConfirm2B will be visible and pressing Yes and No will trigger an appropriate callback function.

반응형

---

Then you will use the following JavaScript code to manipulate DOM elements.  The code uses jQuery.

function showDialog(modalType, modalTitle, modalBodyContent, callbackFn) {
    // TITLE
    $('#txtModalTitle').text(modalTitle);
    
    // BODY - IN HTML MARKUP 
    $('#txtModalBody').html(modalBodyContent);
    
    // BUTTON SECTION
    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;
        // CALLBACK FUNCTION FOR ALERT - 1 BUTTON
        modalConfirm1B(function() {
            callbackFn();
        });
    }
    else {
        // CONFIRM WITH 2 BUTTON CALLBACK
        $('#btnSectionAlert').hide();
        $('#btnSectionConfirm1B').hide();
        $('#btnSectionConfirm2B').show();

        var result = false;
        // CALLBACK FUNCTIONS FOR CONFIRM - 2 BUTTONS
        modalConfirm2B(function(button) {
            if (button == 1) {
                result = true;
                callbackFn(result);
            } else if (button == 2) {
                result = false;
                callbackFn(result);
            }
        });
    }
}

---

Then you are defining the callback functions using the code below.

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

    // BUTTON CLICK EVENT
    $("#btnClose1B").on("click", function () {
        // ACCESSING function() IN modalConfirm1B 
        callback();
        $("#wndModal").modal('hide');
    });
};

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

    // YES BUTTON CLICK EVENT
    $("#btnYes").on("click", function () {
    	// ACCESSING function(button) IN modalConfirm2B => button = 1 
        callback(1);
        $("#wndModal").modal('hide');
    });

    // NO BUTTON CLICK EVENT
    $("#btnNo").on("click", function () {
    	// ACCESSING function(button) IN modalConfirm2B => button = 2
        callback(2);
        $("#wndModal").modal('hide');
    });
};

---

At last, after pressing a button in showDialog function, a callback function will be triggered depending on the "result" value.  The code below is an example on how to call showDialog function to open a dialog box.  
 

Alert

showDialog('alert', 'Duplicate Email Address', 'A user with the same email address exists');

---

Alert with a Callback

showDialog(
    'alertcallback', 
    'Duplicate User', 
    'A duplicate user was found', 
    function() {
    	//ADD A CALLBACK FUNCTION HERE FOR THE EVENT AFTER PRESSING 'CLOSE' BUTTON
    }
);

---

Confirm

showDialog(
    'confirm', 
    'Duplicate File', 
    'A duplicate file was found.  Do you want to overwrite the existing file?', 
    function(result) {
        //ADD A CALLBACK FUNCTION DEPENDING ON THE 'RESULT' (TRUE / FALSE - YES / NO BUTTON)
        if (result) {
            // YES BUTTON EVENT
        }
        else {
            // NO BUTTON EVENT, IF ANY
        }
    }
);

---