November 24, 2010

lendrick lendrick
Lab Rat
3 posts

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?

8 replies

November 24, 2010

2beers 2beers
Lab Rat
149 posts

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

November 24, 2010

mutaphysis mutaphysis
Lab Rat
17 posts

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

  1.     MouseArea {
  2.         id: modal
  3.         anchors.fill: parent      
  4.     }

  1. // show component
  2. var root = modal.parent;
  3.  
  4. while (root.parent) {
  5.     root = root.parent;
  6. }
  7.  
  8. modal.parent = root;

November 25, 2010

fcrochik fcrochik
Lab Rat
517 posts

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”

 Signature 

Certified Specialist & Qt Ambassador Maemo, Meego, Symbian, Playbook, RaspberryPi, Desktop… Qt everywhere!

February 11, 2011

mvinayakam mvinayakam
Lab Rat
1 posts

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.

October 30, 2012

Jacques Jacques
Lab Rat
71 posts

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 [doc.qt.digia.com]

 Signature 

L’imagination est tout, c’est l’aperçu des futures attractions de la vie.

November 6, 2012

Jacques Jacques
Lab Rat
71 posts

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

  1. import QtQuick 1.1
  2.  
  3. Rectangle
  4. {
  5.  
  6.     property int opacitypopup: 0
  7.  
  8.  
  9.     width:   800
  10.     height:  500
  11.     opacity: 1
  12.  
  13.     Rectangle
  14.     {
  15.         color:"lightgrey"
  16.         width: parent.width
  17.         height:parent.height
  18.  
  19.         Text
  20.         {
  21.             anchors
  22.             {
  23.                 centerIn:parent
  24.             }
  25.             font.family: "Segoe UI Light"
  26.             font.pixelSize: 20
  27.             text : "Hello World!"
  28.             color: "black"
  29.         }
  30.         MouseArea
  31.         {
  32.             anchors.fill: parent
  33.  
  34.             onClicked:
  35.             {
  36.                 opacitypopup = 1
  37.             }
  38.         }
  39.  
  40.         Rectangle
  41.         {
  42.             color: "darkgreen"
  43.             width: 200
  44.             height: 100
  45.             opacity: opacitypopup
  46.  
  47.             Behavior on opacity { NumberAnimation { duration: 500 } }
  48.  
  49.             anchors
  50.             {
  51.                 centerIn:parent
  52.             }
  53.  
  54.             Text
  55.             {
  56.                 anchors
  57.                 {
  58.                     centerIn:parent
  59.                 }
  60.                 font.family: "Segoe UI Light"
  61.                 font.pixelSize: 20
  62.                 text : "POPUP"
  63.                 color: "darkgrey"
  64.             }
  65.  
  66.             MouseArea
  67.             {
  68.                 anchors.fill: parent
  69.  
  70.                 onClicked:
  71.                 {
  72.                     opacitypopup = 0
  73.                 }
  74.             }
  75.         }
  76.     }
  77. }

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.

 Signature 

L’imagination est tout, c’est l’aperçu des futures attractions de la vie.

January 8, 2014

JandunCN JandunCN
Lab Rat
18 posts

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

  1. import QtQuick 1.1
  2.  
  3. Rectangle
  4. {
  5.  
  6.     property int opacitypopup: 0
  7.  
  8.  
  9.     width:   800
  10.     height:  500
  11.     opacity: 1
  12.  
  13.     Rectangle
  14.     {
  15.         color:"lightgrey"
  16.         width: parent.width
  17.         height:parent.height
  18.  
  19.         Text
  20.         {
  21.             anchors
  22.             {
  23.                 centerIn:parent
  24.             }
  25.             font.family: "Segoe UI Light"
  26.             font.pixelSize: 20
  27.             text : "Hello World!"
  28.             color: "black"
  29.         }
  30.         MouseArea
  31.         {
  32.             anchors.fill: parent
  33.  
  34.             onClicked:
  35.             {
  36.                 opacitypopup = 1
  37.             }
  38.         }
  39.  
  40.         Rectangle
  41.         {
  42.             color: "darkgreen"
  43.             width: 200
  44.             height: 100
  45.             opacity: opacitypopup
  46.  
  47.             Behavior on opacity { NumberAnimation { duration: 500 } }
  48.  
  49.             anchors
  50.             {
  51.                 centerIn:parent
  52.             }
  53.  
  54.             Text
  55.             {
  56.                 anchors
  57.                 {
  58.                     centerIn:parent
  59.                 }
  60.                 font.family: "Segoe UI Light"
  61.                 font.pixelSize: 20
  62.                 text : "POPUP"
  63.                 color: "darkgrey"
  64.             }
  65.  
  66.             MouseArea
  67.             {
  68.                 anchors.fill: parent
  69.  
  70.                 onClicked:
  71.                 {
  72.                     opacitypopup = 0
  73.                 }
  74.             }
  75.         }
  76.     }
  77. }

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.


Thanks.It’s a good solution.

January 8, 2014

Jacques Jacques
Lab Rat
71 posts

You’re welcome JandunCN.

 Signature 

L’imagination est tout, c’est l’aperçu des futures attractions de la vie.

 
  ‹‹ QML WebView keyboard focus      QML Code not running ››

You must log in to post a reply. Not a member yet? Register here!