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();
diff --git a/core/modules/system/tests/src/FunctionalJavascript/ModalProfileMinimalTest.php b/core/modules/system/tests/src/FunctionalJavascript/ModalProfileMinimalTest.php
new file mode 100644
index 0000000000..c4a74e1465
--- /dev/null
+++ b/core/modules/system/tests/src/FunctionalJavascript/ModalProfileMinimalTest.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace Drupal\Tests\system\FunctionalJavascript;
+
+/**
+ * Tests whether test profiles allow functional JS tests of modal dialogs.
+ *
+ * @group system
+ * @group Ajax
+ */
+class ModalProfileMinimalTest extends ModalProfileTestBase {
+
+  protected $profile = "minimal";
+
+}
diff --git a/core/modules/system/tests/src/FunctionalJavascript/ModalProfileTestBase.php b/core/modules/system/tests/src/FunctionalJavascript/ModalProfileTestBase.php
new file mode 100644
index 0000000000..653f10e6fd
--- /dev/null
+++ b/core/modules/system/tests/src/FunctionalJavascript/ModalProfileTestBase.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace Drupal\Tests\system\FunctionalJavascript;
+
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+use Drupal\Core\Url;
+
+/**
+ * Base test class for verifying that JS tests of modals work with profiles.
+ *
+ * This base test supplies a minimal modal dialog test for other test classes.
+ * The other classes will apply different profiles so we can test whether our
+ * testing profiles interfere with modal dialog operation.
+ *
+ * @see \Drupal\Tests\system\FunctionalJavascript\ModalProfileMinimalTest
+ * @see \Drupal\Tests\system\FunctionalJavascript\ModalProfileTestingTest
+ */
+class ModalProfileTestBase extends JavascriptTestBase {
+
+  public static $modules = ['ajax_test'];
+
+  public function testModal() {
+    $page = $this->getSession()->getPage();
+    $assert = $this->assertSession();
+
+    // Get the page with links to modals.
+    $this->drupalGet(Url::fromRoute('ajax_test.dialog'));
+
+    // Click the modal 1 button.
+    $page->pressButton('button1');
+    $assert->assertWaitOnAjaxRequest();
+
+    // Verify the title text.
+    $this->assertNotEmpty($title = $page->find('css', 'span.ui-dialog-title'));
+    $this->assertEquals('AJAX Dialog &amp; contents', $title->getHtml());
+
+    // Click the close X.
+    $page->pressButton('Close');
+    $assert->assertWaitOnAjaxRequest();
+
+    // Make sure the dialog closed.
+    $this->assertEmpty($page->find('css', 'span.ui-dialog-title'));
+  }
+
+}
diff --git a/core/modules/system/tests/src/FunctionalJavascript/ModalProfileTestingTest.php b/core/modules/system/tests/src/FunctionalJavascript/ModalProfileTestingTest.php
new file mode 100644
index 0000000000..57c01589cc
--- /dev/null
+++ b/core/modules/system/tests/src/FunctionalJavascript/ModalProfileTestingTest.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace Drupal\Tests\system\FunctionalJavascript;
+
+/**
+ * Tests whether test profiles allow functional JS tests of modal dialogs.
+ *
+ * @group system
+ * @group Ajax
+ */
+class ModalProfileTestingTest extends ModalProfileTestBase {
+
+  protected $profile = "testing";
+
+}