System dialog's background not blurred/blackened blackberry

Question

I created a dialog.qml here's the code:

Dialog {
    id: dialog

    signal sampleSignal(string text);

    attachedObjects: [
        TextStyleDefinition {
            id: titleStyle
            base: SystemDefaults.TextStyles.BigText
            color: Color.create("#60323C")
        },
        TextStyleDefinition {
            id: titleTextStyle
            base: SystemDefaults.TextStyles.TitleText
            color: Color.Black
        }
    ]

    Container {
        id: mainContainer
        preferredWidth: 700 
        layout: DockLayout {}
        verticalAlignment: VerticalAlignment.Center;
        horizontalAlignment: HorizontalAlignment.Center;

        background: Color.create("#f9f7f2")

        Container {
            layout: StackLayout {}
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center

            Container {
                layout: DockLayout {}
                background: Color.create("#F4E9E1");
                horizontalAlignment: HorizontalAlignment.Fill;
                preferredHeight: 120
                rightPadding: 10
                leftPadding: 10

                Label {
                    text: "Members" ;              
                    verticalAlignment: VerticalAlignment.Center;
                    textStyle{
                        base: titleStyle.style
                    }
                }

                ImageView {            
                    verticalAlignment: VerticalAlignment.Center;
                    horizontalAlignment: HorizontalAlignment.Right;
                    imageSource: "asset:///images/close_button.png"
                    onTouch: {
                        dialog.close();
                    }
                }   
            }
            Container {
                layout: StackLayout {}
                topPadding: 20
                bottomPadding: 20
                rightPadding: 10
                leftPadding: 10

                TextField {
                    id: name
                    hintText: "Add email address"     
                    input {
                        submitKey: SubmitKey.Submit;
                        onSubmitted: {
                            cppObj.onEmailDoneClicked(name.text, "");
                        }
                    }         
                }

                Divider {}             

                ImageButton {
                    id: doneButton
                    defaultImageSource: "asset:///images/button_done.png"
                    horizontalAlignment: HorizontalAlignment.Center;
                    onClicked: {
                        cppObj.onEmailDoneClicked(name.text, "");
                        doneButton.textAdded();
                    }

                    function textAdded() {
                        dialog.sampleSignal(name.text);
                        dialog.close();
                    }
                }
            }
        }
    }
}

and I call that dialog here

ImageButton {
    id: btnaddmore
    defaultImageSource: "asset:///images/button_add.png"

    onClicked: {
    //controller.showProjectsPage();
    openDialog();
}

The problem here is when the dialog pops up, the screen is not blackened or blurred unlike what we really expect from system dialog like it pops up, and the background is blurred like an overlay in iOS

This is what happens from the current build:

Answer 1

Since you're using a custom dialog you need to do it by yourself. So, if you want to black out and disable all touch events of an underlying page, put this where you open your custom dialog (ie ImageButton):

ImageButton {
    id: btnaddmore
    defaultImageSource: "asset:///images/button_add.png"

    onClicked: {
    //controller.showProjectsPage();

    // --- black out and disable
    underlyingContainer.touchPropagationMode = TouchPropagationMode.None;
    underlyingContainer.opacity = 0.3;
    // --- black out and disable

    openDialog();
}

Similar to that, you'd have to restore controls back when you close the dialog (in onBack() handler - see modified code of your dialog below):

underlyingContainer.touchPropagationMode = TouchPropagationMode.Full;
underlyingContainer.opacity = 1.0;

Here is modified code for you dialog with signal back() being emitted when you press "x" button (if got your code right):

Dialog {
    id: dialog

    signal back();
    signal sampleSignal(string text);

    attachedObjects: [
        TextStyleDefinition {
            id: titleStyle
            base: SystemDefaults.TextStyles.BigText
            color: Color.create("#60323C")
        },
        TextStyleDefinition {
            id: titleTextStyle
            base: SystemDefaults.TextStyles.TitleText
            color: Color.Black
        }
    ]

    Container {
        id: mainContainer
        preferredWidth: 700 
        layout: DockLayout {}
        verticalAlignment: VerticalAlignment.Center;
        horizontalAlignment: HorizontalAlignment.Center;

        background: Color.create("#f9f7f2")

        Container {
            layout: StackLayout {}
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center

            Container {
                layout: DockLayout {}
                background: Color.create("#F4E9E1");
                horizontalAlignment: HorizontalAlignment.Fill;
                preferredHeight: 120
                rightPadding: 10
                leftPadding: 10

                Label {
                    text: "Members" ;              
                    verticalAlignment: VerticalAlignment.Center;
                    textStyle{
                        base: titleStyle.style
                    }
                }

                ImageView {            
                    verticalAlignment: VerticalAlignment.Center;
                    horizontalAlignment: HorizontalAlignment.Right;
                    imageSource: "asset:///images/close_button.png"
                    onTouch: {
                        back();
                        dialog.close();
                    }
                }   
            }
            Container {
                layout: StackLayout {}
                topPadding: 20
                bottomPadding: 20
                rightPadding: 10
                leftPadding: 10

                TextField {
                    id: name
                    hintText: "Add email address"     
                    input {
                        submitKey: SubmitKey.Submit;
                        onSubmitted: {
                            cppObj.onEmailDoneClicked(name.text, "");
                        }
                    }         
                }

                Divider {}             

                ImageButton {
                    id: doneButton
                    defaultImageSource: "asset:///images/button_done.png"
                    horizontalAlignment: HorizontalAlignment.Center;
                    onClicked: {
                        cppObj.onEmailDoneClicked(name.text, "");
                        doneButton.textAdded();
                    }

                    function textAdded() {
                        dialog.sampleSignal(name.text);
                        dialog.close();
                    }
                }
            }
        }
    }
}