diff --git a/src/Components/I18nWidget.tsx b/src/Components/I18nWidget.tsx
index a7514f316..38a628540 100644
--- a/src/Components/I18nWidget.tsx
+++ b/src/Components/I18nWidget.tsx
@@ -28,9 +28,11 @@ export const I18nWidget = (props: I18nWidgetProps) => {
         negativeText: <Text id="stay" />,
         onNegativeFeedback: () => {
             // Reset the select to show the current language instead of the just selected one.
-            setNewLanguage(savedLocale);
             dismissModal();
         },
+        onDismiss: () => {
+            setNewLanguage(savedLocale);
+        },
         hasDismissButton: false,
         backdropDismisses: false,
     });
diff --git a/src/Components/Modal.tsx b/src/Components/Modal.tsx
index 5606872e9..4979508f7 100644
--- a/src/Components/Modal.tsx
+++ b/src/Components/Modal.tsx
@@ -1,5 +1,6 @@
 import { Fragment, ComponentChildren, JSX } from 'preact';
 import { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
 import type { MergeExclusive } from 'type-fest';
 import t from '../Utility/i18n';
 
@@ -68,7 +69,7 @@ export const useModal = (
     const Modal = useCallback(() => {
         if (!shown) return <Fragment />;
 
-        return (
+        return createPortal(
             <div className={`modal${document.getElementsByClassName('modal').length > 0 ? ' no-animation' : ''}`}>
                 <div className="backdrop" onClick={() => options.backdropDismisses && dismiss()} role="presentation" />
 
@@ -109,7 +110,8 @@ export const useModal = (
                             ))}
                     </div>
                 </div>
-            </div>
+            </div>,
+            document.body
         );
     }, [options, dismiss, children, shown]);