How can I add a Popup to the root ApplicationWindow inside a nested Item?

Question

I want to create a Popup modal that covers the entire root ApplicationWindow, but I would like to instantiate this Popup within the widget container I'm building which will be deeply nested withing the QML hierarchy. Unfortunately, instantiating a Popup that is not a direct child of the ApplicationWindow and is scrolled out of view does not center and cover the ApplicationWindow.

In the below code, I've instantiated a Popup in a child Item, but I can't figure out how to make it center on the viewport:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow {
  id: root;
  visible: true
  width: 100
  height: 150

  Flickable {
    id: flickable;
    contentHeight: col_layout.height;
    anchors.fill: parent;
    ColumnLayout {
      id: col_layout;
      Rectangle {color:'green'; width:100; height: 100}
      Rectangle {color:'red';   width:100; height: 100;
        Popup{
          id: popup;
          modal: true;
          visible: true;
          Rectangle{ color:'blue'; width:200; height: 200; }
        }
      }
    }
    MouseArea {
      anchors.fill: parent;
      onClicked: {
        popup.open();
        popup.visible = true;
      }
    }
  }
}

This yields ( the blue Rectangle is the modal content):

Do I have to put a Popup in the global scope of the ApplicationWindow or is there some way to instantiate and control the Popup in some child Item or module?

I've tried setting the parent attribute of the Popup to root to no avail. I'd really like to avoid jamming every conceivable popup into the root ApplicationWindow.

Answer 1

You can't set the parent of the Popup to root, as root is not an Item-type. Therefore it can't be parent.

You could however parent it to root.contentItem.

As you might declare the Popup in some other file, and therefore might shadow the id: root, I'd vote for the usage of the attached property ApplicationWindow instead, which is available, if you use it.

Popup {
    id: popup;
    modal: true;
    visible: true;
    parent: ApplicationWindow.contentItem // This will do the trick
    Rectangle{ color:'blue'; width:200; height: 200; }
}