Replace the show message function with a bootstrap equivalent (no jquery ui used any more)

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 () {
+                    className: 'btn btn-outline-primary',
-                        $('#message-box').dialog('close');
+                    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 = $(`
+            <div class="modal" id="message-modal">
+                <div class="modal-dialog center-modal">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">
+                                ${title}
+                            </h5>
+                        </div>
+                        <div class="modal-body">
+                            <p>
+                                ${message}
+                            </p>
+                        </div>
+                        <div class="modal-footer">
+                            <!-- * -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `).appendTo('body');
 
-        const $messageBox = $('<div/>', {
+        buttons.forEach((button) => {
-            'id': 'message-box',
+            if (!button) {
-            'title': title,
+                return;
-            'html': [
+            }
-                $('<p/>', {
-                    'html': message
-                })
-            ]
-        }).appendTo('body');
 
-        $messageBox.dialog({
+            if (!button.className) {
-            autoOpen: false,
+                button.className = 'btn btn-outline-primary';
-            modal: true,
+            }
-            resize: 'auto',
+
-            width: 'auto',
+            const $button = $(`
-            height: 'auto',
+                <button type="button" class="${button.className}" data-bs-dismiss="modal">
-            resizable: false,
+                    ${button.text}
-            buttons: buttons,
+                </button>
-            closeOnEscape: true
+            `).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');
+        messageModal.show();
-        $('.ui-dialog .ui-dialog-buttonset button:last').addClass('btn btn-primary').focus();
-        $('.ui-dialog .ui-dialog-buttonset button:last').prepend(
-            $('<i/>', {
-                'class': 'fas fa-check-square me-2'
-            })
-        );
 
-        $('#message-box .ui-dialog-titlebar-close').hide();
+        $('#message-modal').css('z-index', '99999').next().css('z-index', '9999');
     }
 
     return {