diff --git a/resources/js/src/database/events.ts b/resources/js/src/database/events.ts
index 50598aee52..068d3b9876 100644
--- a/resources/js/src/database/events.ts
+++ b/resources/js/src/database/events.ts
@@ -107,41 +107,23 @@ const DatabaseEvents = {
             }
 
             ajaxRemoveMessage($msg);
-            /**
-             * @var buttonOptions Object containing options
-             *                     for jQueryUI dialog buttons
-             */
-            var buttonOptions = {
-                [window.Messages.strClose]: {
-                    text: window.Messages.strClose,
-                    class: 'btn btn-primary',
-                    click: function () {
-                        $(this).dialog('close').remove();
-                    },
-                },
-            };
-            /**
-             * Display the dialog to the user
-             */
-            data.message = '<textarea cols="40" rows="15" class="w-100">' + data.message + '</textarea>';
-            var $ajaxDialog = $('<div>' + data.message + '</div>').dialog({
-                classes: {
-                    'ui-dialog-titlebar-close': 'btn-close'
-                },
-                width: 500,
-                // @ts-ignore
-                buttons: buttonOptions,
-                title: data.title
+
+            const eventsExportTextarea = '<textarea id="eventsExportTextarea" cols="40" rows="15" class="form-control" aria-label="' + window.Messages.strEvent + '"></textarea>';
+            const eventsExportModal = document.getElementById('eventsExportModal');
+            eventsExportModal.addEventListener('shown.bs.modal', function () {
+                eventsExportModal.querySelector('.modal-title').textContent = data.title;
+                eventsExportModal.querySelector('.modal-body').innerHTML = eventsExportTextarea;
+                document.getElementById('eventsExportTextarea').textContent = data.message;
+                getSqlEditor($('#eventsExportTextarea'));
             });
-            // Attach syntax highlighted editor to export dialog
-            /**
-             * @var $elm jQuery object containing the reference
-             *           to the Export textarea.
-             */
-            var $elm = $ajaxDialog.find('textarea');
-            getSqlEditor($elm);
-        } // end showExport()
-    },  // end exportDialog()
+
+            eventsExportModal.addEventListener('hidden.bs.modal', function () {
+                eventsExportModal.querySelector('.modal-body').innerHTML = eventsExportTextarea;
+            });
+
+            window.bootstrap.Modal.getOrCreateInstance(eventsExportModal).show();
+        }
+    },
     editorDialog: function (isNew, $this) {
         var that = this;
         /**
diff --git a/resources/templates/database/events/index.twig b/resources/templates/database/events/index.twig
index c91000b465..6477c0c284 100644
--- a/resources/templates/database/events/index.twig
+++ b/resources/templates/database/events/index.twig
@@ -173,4 +173,19 @@
       </div>
     </div>
   </div>
+
+  <div class="modal fade" id="eventsExportModal" tabindex="-1" aria-labelledby="eventsExportModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="eventsExportModalLabel">{{ t('Export event') }}</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
+        </div>
+        <div class="modal-body"></div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/src/Controllers/JavaScriptMessagesController.php b/src/Controllers/JavaScriptMessagesController.php
index 2b00a923b0..a83f9f5852 100644
--- a/src/Controllers/JavaScriptMessagesController.php
+++ b/src/Controllers/JavaScriptMessagesController.php
@@ -392,6 +392,7 @@ final class JavaScriptMessagesController implements InvocableController
             'NoExportable' => __('No routine is exportable. Required privileges may be lacking.'),
             'strRoutine' => __('Routine'),
             'strTrigger' => __('Trigger'),
+            'strEvent' => __('Event'),
 
             /* For ENUM/SET editor*/
             'enum_columnVals' => __('Values for column %s'),
diff --git a/tests/unit/Controllers/Database/EventsControllerTest.php b/tests/unit/Controllers/Database/EventsControllerTest.php
index 87bbbe27e1..f6c56d1b40 100644
--- a/tests/unit/Controllers/Database/EventsControllerTest.php
+++ b/tests/unit/Controllers/Database/EventsControllerTest.php
@@ -201,6 +201,21 @@ final class EventsControllerTest extends AbstractTestCase
       </div>
     </div>
   </div>
+
+  <div class="modal fade" id="eventsExportModal" tabindex="-1" aria-labelledby="eventsExportModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="eventsExportModalLabel">Export event</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body"></div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 HTML;
@@ -347,6 +362,21 @@ HTML;
       </div>
     </div>
   </div>
+
+  <div class="modal fade" id="eventsExportModal" tabindex="-1" aria-labelledby="eventsExportModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="eventsExportModalLabel">Export event</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body"></div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 HTML;