How to use QC2 Popup/ApplicationWindow "Overlay"

EStudley

Hey all,

Trying to figure out how to get overlays working with my custom Style and Popup in my application.

I am looking to have a 100x100 popup in the center of my application, with the entire background an opaque grey color.

// MyPage.qml
// ContentItem for a Page in a StackView of my application.
Item { 

    Popup {
        x: (parent.width - width) / 2
        y: (parent.height - height) / 2
        width: 100
        height: 100
    }
}

// Popup.qml
// Style re-implementation of Popup.
T.Popup {
    parent: Overlay.overlay
    visible: true

    background: Rectangle { color: Theme.popupColor }
    
//    Didn't work
//    T.Overlay.modal: Rectangle { opacity: 0.5; color: Theme.overlayColor }
//    T.Overlay.modeless: Rectangle { opacity: 0.5; color: Theme.overlayColor }
}

// ApplicationWindow.qml
// Style re-implementation of ApplicationWindow.
T.ApplicationWindow {
    id: control
    visible: true
    color: Theme.backgroundColor

//    Didn't work
//    overlay.modal: Rectangle { opacity: 0.5; color: Theme.overlayColor }
//    overlay.modeless: Rectangle { opacity: 0.5; color: Theme.overlayColor }
    
//    Didn't work
//    T.Overlay.modal: Rectangle { opacity: 0.5; color: Theme.overlayColor }
//    T.Overlay.modeless: Rectangle { opacity: 0.5; color: Theme.overlayColor }
}

Currently, this does NOT set the modal overlay of the ApplicationWindow correctly. All I see is a Rectangle Popup in the middle of my screen with no dimming effect whatsoever.

What am I missing here to dim the rest of the window?

EStudley

I figured it out!

I wasn't setting the "modal: true" value in the Popup.