Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Modal pop-up dialogs in QML?



  • 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?



  • 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



  • 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;
    @



  • 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"



  • 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.



  • 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



  • 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 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.



  • You're welcome JandunCN.


Log in to reply