Modal pop-up dialogs in QML?

lendrick

Greets!

I'm trying to create a modal popup in QML and I'm not having a whole lot of luck. It's easy enough to set up a MouseArea inside of an element, but how do I make it so that any clicks outside of the element are ignored by the application? It seems like if I made a MouseArea that covers the whole screen then that would do it, but I'm not having any luck detecting the bounds of the screen, particularly in relation to the position of the popup element. Help?

2beers

Hi I'm not sure if it's an easy-predefined solution. maybe you should wait for qt-components for that, or make your own implementation.
if you want your own implementation you need to disable all the mouseareas when you show the new window, and when you close it enable the mouse areas. this is the quickest solution ever come to my mind

mutaphysis

You can detect the bounds of the root element at least, or put your modal (that has anchors.fill: parent) on the root:

@
MouseArea {
id: modal
anchors.fill: parent
}
@

@
// show component
var root = modal.parent;

while (root.parent) {
root = root.parent;
}

modal.parent = root;
@

fcrochik

I don't know if it works but one idea may be to create a "transparent" or "partially opaque" rectangle the size of the screen and then your window on the top of it. The rectangle should prevent your mouse clicks reaching the "background elements"

mvinayakam

Thanks for this. This is a nice solution to block the mouse clicks

I have a similar scenario where both the user can use both keyboard and mouse. From any screen, this popup can be invoked through the keyboard which works fine. However closing the popup doesn't return the focus to the calling screen.

Does anyone have an idea of how to do this.

godbod

Did you find a solution ? I am working on it. I will past some code soon... The link bellow can be a answer to the popup Use Case :
"popup":http://doc.qt.digia.com/qt-components-symbian/qml-popupmanager.html

godbod

Here is the QML code I have done. Maybe this code will help.

@
import QtQuick 1.1

Rectangle
{

property int opacitypopup: 0


width:   800
height:  500
opacity: 1

Rectangle
{
    color:"lightgrey"
    width: parent.width
    height:parent.height

    Text
    {
        anchors
        {
            centerIn:parent
        }
        font.family: "Segoe UI Light"
        font.pixelSize: 20
        text : "Hello World!"
        color: "black"
    }
    MouseArea
    {
        anchors.fill: parent

        onClicked:
        {
            opacitypopup = 1
        }
    }

    Rectangle
    {
        color: "darkgreen"
        width: 200
        height: 100
        opacity: opacitypopup

        Behavior on opacity { NumberAnimation { duration: 500 } }

        anchors
        {
            centerIn:parent
        }

        Text
        {
            anchors
            {
                centerIn:parent
            }
            font.family: "Segoe UI Light"
            font.pixelSize: 20
            text : "POPUP"
            color: "darkgrey"
        }

        MouseArea
        {
            anchors.fill: parent

            onClicked:
            {
                opacitypopup = 0
            }
        }
    }
}

}
@

But I have another question : how can we managed to do such a popup on a Listview ? Because it seems that Delegate always try to be placed above averything other things.

dscyw

[quote author="Jacques" date="1352198557"]Here is the QML code I have done. Maybe this code will help.

@
import QtQuick 1.1

Rectangle
{

property int opacitypopup: 0


width:   800
height:  500
opacity: 1

Rectangle
{
    color:"lightgrey"
    width: parent.width
    height:parent.height

    Text
    {
        anchors
        {
            centerIn:parent
        }
        font.family: "Segoe UI Light"
        font.pixelSize: 20
        text : "Hello World!"
        color: "black"
    }
    MouseArea
    {
        anchors.fill: parent

        onClicked:
        {
            opacitypopup = 1
        }
    }

    Rectangle
    {
        color: "darkgreen"
        width: 200
        height: 100
        opacity: opacitypopup

        Behavior on opacity { NumberAnimation { duration: 500 } }

        anchors
        {
            centerIn:parent
        }

        Text
        {
            anchors
            {
                centerIn:parent
            }
            font.family: "Segoe UI Light"
            font.pixelSize: 20
            text : "POPUP"
            color: "darkgrey"
        }

        MouseArea
        {
            anchors.fill: parent

            onClicked:
            {
                opacitypopup = 0
            }
        }
    }
}

}
@

But I have another question : how can we managed to do such a popup on a Listview ? Because it seems that Delegate always try to be placed above averything other things.[/quote]
Thanks.It's a good solution.

godbod

You're welcome JandunCN.