diff --git a/js/src/functions.js b/js/src/functions.js
index f618033982..ee563379f3 100644
--- a/js/src/functions.js
+++ b/js/src/functions.js
@@ -3376,6 +3376,39 @@ AJAX.registerOnload('functions.js', function () {
 Functions.indexDialogModal = function (routeUrl, url, title, callbackSuccess, callbackFailure) {
     /* Remove the hidden dialogs if there are*/
     var modal = $('#indexDialogModal');
+
+    const indexDialogPreviewModal = document.getElementById('indexDialogPreviewModal');
+    indexDialogPreviewModal.addEventListener('shown.bs.modal', () => {
+        const modalBody = indexDialogPreviewModal.querySelector('.modal-body');
+        const $form = $('#index_frm');
+        const formUrl = $form.attr('action');
+        const sep = CommonParams.get('arg_separator');
+        const formData = $form.serialize() +
+            sep + 'do_save_data=1' +
+            sep + 'preview_sql=1' +
+            sep + 'ajax_request=1';
+        $.post({
+            url: formUrl,
+            data: formData,
+            success: response => {
+                if (! response.success) {
+                    modalBody.innerHTML = '<div class="alert alert-danger" role="alert">' + Messages.strErrorProcessingRequest + '</div>';
+                    return;
+                }
+
+                modalBody.innerHTML = response.sql_data;
+                Functions.highlightSql($('#indexDialogPreviewModal'));
+            },
+            error: () => {
+                modalBody.innerHTML = '<div class="alert alert-danger" role="alert">' + Messages.strErrorProcessingRequest + '</div>';
+            }
+        });
+    });
+    indexDialogPreviewModal.addEventListener('hidden.bs.modal', () => {
+        indexDialogPreviewModal.querySelector('.modal-body').innerHTML = '<div class="spinner-border" role="status">' +
+            '<span class="visually-hidden">' + Messages.strLoading + '</span></div>';
+    });
+
     /**
      * @var button_options Object that stores the options
      *                     passed to jQueryUI dialog
@@ -3427,11 +3460,7 @@ Functions.indexDialogModal = function (routeUrl, url, title, callbackSuccess, ca
             }
         }); // end $.post()
     });
-    $('#indexDialogModalPreviewButton').on('click', function () {
-        // Function for Previewing SQL
-        var $form = $('#index_frm');
-        Functions.previewSql($form);
-    });
+
     var $msgbox = Functions.ajaxShowMessage();
     $.post(routeUrl, url, function (data) {
         if (typeof data !== 'undefined' && data.success === false) {
diff --git a/templates/modals/index_dialog_modal.twig b/templates/modals/index_dialog_modal.twig
index 3649464d3b..a079504763 100644
--- a/templates/modals/index_dialog_modal.twig
+++ b/templates/modals/index_dialog_modal.twig
@@ -7,10 +7,28 @@
       </div>
       <div class="modal-body"></div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" id="indexDialogModalGoButton">{% trans 'Go' %}</button>
-        <button type="button" class="btn btn-secondary" id="indexDialogModalPreviewButton">{% trans 'Preview SQL' %}</button>
+        <button type="button" class="btn btn-primary" id="indexDialogModalGoButton">{% trans 'Go' %}</button>
+        <button type="button" class="btn btn-secondary" data-bs-target="#indexDialogPreviewModal" data-bs-toggle="modal">{% trans 'Preview SQL' %}</button>
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Close' %}</button>
       </div>
     </div>
   </div>
 </div>
+<div class="modal fade" id="indexDialogPreviewModal" aria-hidden="true" aria-labelledby="indexDialogPreviewModalLabel" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="indexDialogPreviewModalLabel">{% trans 'Preview SQL' %}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
+      </div>
+      <div class="modal-body">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">{% trans 'Loading…' %}</span>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" data-bs-target="#indexDialogModal" data-bs-toggle="modal">{% trans 'Go back' %}</button>
+      </div>
+    </div>
+  </div>
+</div>