diff --git a/core/modules/overlay/overlay.module b/core/modules/overlay/overlay.module
index 1566740..9765b76 100644
--- a/core/modules/overlay/overlay.module
+++ b/core/modules/overlay/overlay.module
@@ -521,8 +521,12 @@ function template_preprocess_overlay(&$variables) {
   $variables['disable_overlay'] = overlay_disable_message();
 
   // Add atrributes for the overlay container.
+  $variables['attributes']['id'] = 'overlay';
   $variables['attributes']['class'][] = 'overlay';
+  // Add attributes for the overlay title.
+  $variables['title_attributes']['id'] = 'overlay-title';
   // Add attributes for the overlay content.
+  $variables['content_attributes']['id'] = 'overlay-content';
   $variables['content_attributes']['class'][] = 'clearfix';
 }
 
diff --git a/core/modules/overlay/templates/overlay.html.twig b/core/modules/overlay/templates/overlay.html.twig
new file mode 100644
index 0000000..f54633e
--- /dev/null
+++ b/core/modules/overlay/templates/overlay.html.twig
@@ -0,0 +1,38 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a page in the overlay.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - content_attributes: HTML attributes for the content.
+ * - title_attributes: HTML attributes for the title.
+ * - title: The (sanitized) title of the page.
+ * - page: The rendered page content.
+ * - tabs: Tabs linking to any sub-pages beneath the current page (e.g., the
+ *   view and edit tabs when displaying a node).
+ * - disable_overlay: The message about how to disable the overlay.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_overlay()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ disable_overlay }}
+<div{{ attributes }}>
+  <div id="overlay-titlebar" class="clearfix">
+    <div id="overlay-title-wrapper" class="clearfix">
+      <h1{{ title_attributes }}>{{ title }}</h1>
+    </div>
+    <div id="overlay-close-wrapper">
+      <a id="overlay-close" href="#" class="overlay-close" role="button" aria-controls="overlay-content"><span class="element-invisible">{{ 'Close overlay'|t }}</span></a>
+    </div>
+    {% if tabs %}
+      <h2 class="element-invisible">{{ 'Primary tabs'|t }}</h2><ul id="overlay-tabs">{{ tabs }}</ul>
+    {% endif %}
+  </div>
+  <div{{ content_attributes }}>
+    {{ page }}
+  </div>
+</div>
diff --git a/core/modules/overlay/templates/overlay.tpl.php b/core/modules/overlay/templates/overlay.tpl.php
deleted file mode 100644
index 2b342ba..0000000
--- a/core/modules/overlay/templates/overlay.tpl.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-
-/**
- * @file
- * Default theme implementation to display a page in the overlay.
- *
- * Available variables:
- * - $title: the (sanitized) title of the page.
- * - $page: The rendered page content.
- * - $tabs (array): Tabs linking to any sub-pages beneath the current page
- *   (e.g., the view and edit tabs when displaying a node).
- * Helper variables:
- * - $classes_array: Array of HMTL class attribute values. It is flattened into
- *   a string within the variable $classes.
- *
- * @see template_preprocess()
- * @see template_preprocess_overlay()
- * @see template_process()
- *
- * @ingroup themeable
- */
-?>
-
-<?php print render($disable_overlay); ?>
-<div id="overlay" <?php print $attributes; ?>>
-  <div id="overlay-titlebar" class="clearfix">
-    <div id="overlay-title-wrapper" class="clearfix">
-      <h1 id="overlay-title"<?php print $title_attributes; ?>><?php print $title; ?></h1>
-    </div>
-    <div id="overlay-close-wrapper">
-      <a id="overlay-close" href="#" class="overlay-close" role="button" aria-controls="overlay-content"><span class="element-invisible"><?php print t('Close overlay'); ?></span></a>
-    </div>
-    <?php if ($tabs): ?><h2 class="element-invisible"><?php print t('Primary tabs'); ?></h2><ul id="overlay-tabs"><?php print render($tabs); ?></ul><?php endif; ?>
-  </div>
-  <div id="overlay-content"<?php print $content_attributes; ?>>
-    <?php print $page; ?>
-  </div>
-</div>