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:
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.
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:
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
}
}
);
Page Change Event Code That Works in ALL Devices and Browsers - JavaScript (0) | 2023.03.13 |
---|---|
Static Method Using "this" Parameter - C# & .NET (0) | 2023.03.09 |
Easy Guide to AutoMapper (Simple Class Converter) - C# & .NET (0) | 2023.02.26 |
Tips for Performance Improvement - Visual Studio (0) | 2023.02.26 |
Persisting Grafana and Prometheus Configuration Data - Kubernetes (0) | 2023.02.20 |