Move popover into the body element

These elements do not exist within dialogs and their behavior does not play well with fixed positioning.

diff --git a/ts/WoltLabSuite/Core/Controller/Popover.ts b/ts/WoltLabSuite/Core/Controller/Popover.ts
index 7a20165e9f62362014916f232f80ab5dcfefdd15..cf7ac0b76164f0b154b64edc373529c651085fc0 100644 (file)
--- a/ts/WoltLabSuite/Core/Controller/Popover.ts
+++ b/ts/WoltLabSuite/Core/Controller/Popover.ts
@@ -12,7 +12,6 @@ import DomUtil from "../Dom/Util";
 import * as Environment from "../Environment";
 import * as UiAlignment from "../Ui/Alignment";
 import { AjaxCallbackObject, AjaxCallbackSetup, CallbackFailure, CallbackSuccess, RequestPayload } from "../Ajax/Data";
-import { getPageOverlayContainer } from "../Helper/PageOverlay";
 
 const enum State {
   None,
@@ -83,7 +82,7 @@ class ControllerPopover implements AjaxCallbackObject {
     pointer.appendChild(document.createElement("span"));
     this.popover.appendChild(pointer);
 
-    getPageOverlayContainer().append(this.popover);
+    document.body.append(this.popover);
 
     // event listener
     this.popover.addEventListener("mouseenter", () => this.popoverMouseEnter());

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Popover.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Popover.js
index 4b9df5d1ccccce282548535efb0129c0b1046d9e..120420cb9944f0ea4ac08c0fe37c47b06b32fbc5 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Popover.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Popover.js
@@ -5,7 +5,7 @@
  * @copyright  2001-2019 WoltLab GmbH
  * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  */
-define(["require", "exports", "tslib", "../Ajax", "../Dom/Change/Listener", "../Dom/Util", "../Environment", "../Ui/Alignment", "../Helper/PageOverlay"], function (require, exports, tslib_1, Ajax, Listener_1, Util_1, Environment, UiAlignment, PageOverlay_1) {
+define(["require", "exports", "tslib", "../Ajax", "../Dom/Change/Listener", "../Dom/Util", "../Environment", "../Ui/Alignment"], function (require, exports, tslib_1, Ajax, Listener_1, Util_1, Environment, UiAlignment) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ajaxApi = exports.setContent = exports.init = void 0;
@@ -38,7 +38,7 @@ define(["require", "exports", "tslib", "../Ajax", "../Dom/Change/Listener", "../
             pointer.className = "elementPointer";
             pointer.appendChild(document.createElement("span"));
             this.popover.appendChild(pointer);
-            (0, PageOverlay_1.getPageOverlayContainer)().append(this.popover);
+            document.body.append(this.popover);
             // event listener
             this.popover.addEventListener("mouseenter", () => this.popoverMouseEnter());
             this.popover.addEventListener("mouseleave", () => this.mouseLeave());