Fix the parent element for the image viewer

See https://www.woltlab.com/community/thread/310578-imageviewer-hinter-neuem-dialog/

Author: dtdesign

ts/WoltLabSuite/Core/Helper/PageOverlay.ts

@@ -61,3 +61,5 @@ export function releasePageOverlayContainer(element: HTMLElement): void {
 export function getPageOverlayContainer(): HTMLElement {
   return container;
 }
+
+window.__wcf_bc_getPageOverlayContainer = getPageOverlayContainer;

ts/global.d.ts

@@ -51,6 +51,7 @@ declare global {
     __wcf_bc_colorUtil: typeof ColorUtil;
     __wcf_bc_datePicker: typeof DatePicker;
     __wcf_bc_eventHandler: typeof EventHandler;
+    __wcf_bc_getPageOverlayContainer: () => HTMLElement;
 
     WoltLabLanguage: {
       getPhrase(key: string, parameters?: object): string;

wcfsetup/install/files/js/WCF.ImageViewer.js

@@ -18,15 +18,20 @@ WCF.ImageViewer = Class.extend({
 	 * Initializes the WCF.ImageViewer class.
 	 */
 	init: function() {
-		this._triggerElement = $('<span class="wcfImageViewerTriggerElement" />').data('disableSlideshow', true).hide().appendTo(document.body);
-		this._triggerElement.wcfImageViewer({
-			enableSlideshow: 0,
-			imageSelector: '.jsImageViewerEnabled',
-			staticViewer: true
+		require(["WoltLabSuite/Core/Helper/PageOverlay"], ({ getPageOverlayContainer }) => {
+			this._triggerElement = $('<span class="wcfImageViewerTriggerElement" />')
+				.data("disableSlideshow", true)
+				.hide()
+				.appendTo(getPageOverlayContainer());
+			this._triggerElement.wcfImageViewer({
+				enableSlideshow: 0,
+				imageSelector: ".jsImageViewerEnabled",
+				staticViewer: true,
+			});
+
+			WCF.DOMNodeInsertedHandler.addCallback("WCF.ImageViewer", $.proxy(this._domNodeInserted, this));
+			WCF.DOMNodeInsertedHandler.execute();
 		});
-		
-		WCF.DOMNodeInsertedHandler.addCallback('WCF.ImageViewer', $.proxy(this._domNodeInserted, this));
-		WCF.DOMNodeInsertedHandler.execute();
 	},
 
 	/**
@@ -895,7 +900,11 @@ $.widget('ui.wcfImageViewer', {
 
 		this._didInit = true;
 
-		this._container = $('<div class="wcfImageViewer' + (this.options.staticViewer ? ' wcfImageViewerStatic' : '') + '" />').appendTo(document.body);
+		this._container = $(
+			'<div class="wcfImageViewer' +
+				(this.options.staticViewer ? " wcfImageViewerStatic" : "") +
+				'" />',
+		).appendTo(window.__wcf_bc_getPageOverlayContainer());
 		var $imageContainer = $('<div><img /><img /></div>').appendTo(this._container);
 		var $imageList = $('<footer><span class="wcfImageViewerButtonPrevious"><fa-icon size="24" name="angles-left"></fa-icon></span><div><ul /></div><span class="wcfImageViewerButtonNext"><fa-icon size="24" name="angles-right"></fa-icon></span></footer>').appendTo(this._container);
 		var $slideshowContainer = $('<ul />').appendTo($imageContainer);