diff --git a/assets/js/utils/message.js b/assets/js/utils/message.js
index 10fb8e77..450140be 100644
--- a/assets/js/utils/message.js
+++ b/assets/js/utils/message.js
@@ -15,6 +15,8 @@
* This module implements the functionality of messages.
*/
window.App.Utils.Message = (function () {
+ let messageModal = null;
+
/**
* Show a message box to the user.
*
@@ -26,55 +28,78 @@ window.App.Utils.Message = (function () {
* @param {Array} [buttons] Contains the dialog buttons along with their functions.
*/
function show(title, message, buttons = null) {
+ if (!title || !message) {
+ return;
+ }
+
if (!buttons) {
buttons = [
{
text: lang('close'),
- click: function () {
- $('#message-box').dialog('close');
- }
- }
+ className: 'btn btn-outline-primary',
+ click: function (event, messageModal) {
+ messageModal.dispose();
+ },
+ },
];
}
- // Destroy previous dialog instances.
+ if (messageModal?.dispose && messageModal?._element) {
+ messageModal.dispose();
+ }
- $('#message-box').dialog('destroy').remove();
+ $('#message-modal').remove();
- // Create the HTML of the message box.
+ const $messageModal = $(`
+
+ `).appendTo('body');
- const $messageBox = $('', {
- 'id': 'message-box',
- 'title': title,
- 'html': [
- $('', {
- 'html': message
- })
- ]
- }).appendTo('body');
+ buttons.forEach((button) => {
+ if (!button) {
+ return;
+ }
- $messageBox.dialog({
- autoOpen: false,
- modal: true,
- resize: 'auto',
- width: 'auto',
- height: 'auto',
- resizable: false,
- buttons: buttons,
- closeOnEscape: true
+ if (!button.className) {
+ button.className = 'btn btn-outline-primary';
+ }
+
+ const $button = $(`
+
+ `).appendTo($messageModal.find('.modal-footer'));
+
+ if (button.click) {
+ $button.on('click', (event) => button.click(event, messageModal));
+ }
});
- $messageBox.dialog('open');
+ messageModal = new bootstrap.Modal('#message-modal', {
+ keyboard: false,
+ backdrop: 'static',
+ });
- $('.ui-dialog .ui-dialog-buttonset button:not(:last)').addClass('btn btn-secondary');
- $('.ui-dialog .ui-dialog-buttonset button:last').addClass('btn btn-primary').focus();
- $('.ui-dialog .ui-dialog-buttonset button:last').prepend(
- $('', {
- 'class': 'fas fa-check-square me-2'
- })
- );
+ messageModal.show();
- $('#message-box .ui-dialog-titlebar-close').hide();
+ $('#message-modal').css('z-index', '99999').next().css('z-index', '9999');
}
return {