diff --git a/core/misc/dialog/dialog.ajax.es6.js b/core/misc/dialog/dialog.ajax.es6.js
index a6f2e71ce7..800bed1ebc 100644
--- a/core/misc/dialog/dialog.ajax.es6.js
+++ b/core/misc/dialog/dialog.ajax.es6.js
@@ -219,6 +219,16 @@
    *   Dialog settings.
    */
   $(window).on('dialog:aftercreate', (e, dialog, $element, settings) => {
+    // jQuery UI dialog calculates the zIndex by class '.ui-widget-overlay.ui-front'.
+    // With CSS conditional loading, the zIndex defined in 'core/assets/vendor/jquery.ui/themes/base/core.css'
+    // loaded after JavaScript execution. Therefore, the jQuery UI will not update
+    // the opened modal's zIndex correctly.
+    // The default zIndex value of '.ui-widget-overlay.ui-front' is 100,
+    // so we add 1 to it.
+    if ($('.ui-widget-overlay').css('zIndex') === 'auto') {
+      $element.data('uiDialog').uiDialog.css('zIndex', 101);
+    }
+
     $element.on('click.dialog', '.dialog-cancel', (e) => {
       dialog.close('cancel');
       e.preventDefault();
diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js
index de1d3c9219..dbb324ffb5 100644
--- a/core/misc/dialog/dialog.ajax.js
+++ b/core/misc/dialog/dialog.ajax.js
@@ -121,6 +121,10 @@
   };
 
   $(window).on('dialog:aftercreate', function (e, dialog, $element, settings) {
+    if ($('.ui-widget-overlay').css('zIndex') === 'auto') {
+      $element.data('uiDialog').uiDialog.css('zIndex', 101);
+    }
+
     $element.on('click.dialog', '.dialog-cancel', function (e) {
       dialog.close('cancel');
       e.preventDefault();