Correct way for a popup or overlay?

[FuzzyWombatPonies]

I have a Canvas with a MouseArea that triggers a Popup of another Item(ZoneOptionsPopup) I have defined without changing the rest of the currently visible content(except for the popup obscuring it). I know the code is creating a new object every time I click. I'll move that bit elsewhere later, it's just for experimenting. The ZoneOptionsPopup will eventually have layouts within it that will take you to child pages with the goal of navigating the children as required and then jjust being able to click outside of the defined popup area or a final "close" button to close the popup. Is my approach the correct way to accomplish this or am I using Popup very wrong?

MouseArea {
                id: mouseArea
                anchors.fill: image
                onClicked: {
                    var ctx = image.getContext("2d")
                    var id = ctx.getImageData(mouseArea.mouseX, mouseArea.mouseY, 1, 1)
                    var zonecomponent= Qt.createComponent("ZoneOptionsPopup.qml")
                    var zoneloadwin = zonecomponent.createObject(viewPage, {zoneName: zoneList[0].getName, lights: zoneList[0].getLightList} )
                    zoneloadwin.open()
                }
            }

ZoneOptionsPopup.qml:

Popup {
    // create a single map of the objects ahead of time
    property var presetPages: ({})
    property var pickerPages: ({})
    property var lights
    property var zoneName
    parent: Overlay.overlay
    id: page
    modal: true
    background: Rectangle {
         color: "transparent"
     }
    focus: true
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnReleaseOutside
    Component.onCompleted:
    {
        if (lights.length !== 0) {
            for (var i=0; i<lights.length; i++) {
                if (lights[i].getType === "PlusRGBWPM") {
                    var zonecomponent = Qt.createComponent("Presets.qml")
                    var zoneloadwin = zonecomponent.createObject(page.parent, {device: lights[i]})
                    presetPages[lights[i]] = zoneloadwin
                }
                if (lights[i].getType === "PlusRGBWPM") {
                    var zonecomponentPicker = Qt.createComponent("ColorPicker.qml")
                    var zoneloadwinPicker = zonecomponentPicker.createObject(page, {device: lights[i]})
                    pickerPages[lights[i]] = zoneloadwinPicker
                }
            }
        }
    }
    SMAHTBox {
        width: parent.width // / 2
        id: box        
   }
}

SMAHTBox.qml:

Item {
    implicitWidth: window.width / 1.1
    implicitHeight: window.height / 1.1
    x: window.width / 2 - width / 2
    y: window.height / 2 - height / 2


    Rectangle {
        id: container
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        color: "#aa000000"
        width: parent.width
        implicitHeight: parent.height
        radius: 50
        anchors.margins: 100
    }
    MultiEffect {
        source: container
        anchors.fill: parent
        blurEnabled: true
        blurMax: 96
        blur: 1.0
    }
}

[GrecKo]

I'm not sure what is the question.

You are creating a Popup and that's the correct approach to have something above the rest of your content. You also set the close policy according to what I assume is what you want.

As you also identified, your dynamic object creation can be improved.

My rule of thumb: don't ever use Qt.createComponent, and use createObject lightly.
I'd argue here that using createObject is the correct approach for creating a popup. You can just use a declaratively created Component instead.
As for creating items from a list, you should use a ListView or a Repeater instead. With a DelegateChooser if you need different delegates.