Modal dialogs can be bypassed

[jdupont092]

I had to face this exact issue in my own web application (I'm not using extjs).
I was originally using the same hack to simulate modal dialogs (ie, putting a 50% transparency div over the whole page) then discovered that TAB could lead to serious problems (for exemple, i used modals to allow users to change property on selected elements, but they could change the actual selected element using the TAB key AFTER the modal appears).

So i decided to make it less appealing but more stable : i now hide the whole page (mainPanel.style.visiblity='hidden') then show it again on modal close (mainPanel.style.visibility='').
Works like a charm, even if it's less eye candy.

[jdupont092]

Some adds :
Modal Windows does NOT disable every window of an application : they only disable their parent window.
You can have two normal windows shown in your application, then one of them would pop a modal, then only this window would be disabled, not the other.
At the same time, if the other window also pop a modal, and then you close only one of those modal, only the parent of the modal closed is re-enabled, not every window.
Quick Example :
Open firefox, go to a website. Open the Download window using Tools/Downloads. This window is not a modal one, you can still use your main Ffx window. Then right click on a downloaded element inside the download window, and choose 'Properties'. The property window IS a modal, but only the download window is unreachable, the Ffx window is still usable.

This means that you have to track your parent window for every modal :

Inside the main window (yeah, even the main application should at least implements DisableWindow/EnableWindow) :
function DoSomething()
{
.....
ShowModal(newWindow,this);
.....
}

//Static ShowModal function with :
//win : window to show in modal mode.
//parent : parent of the modal window.
function ShowModal(win, parent)
{
parent.DisableWindow();
win.IsModal=true;
win.Parent=parent;//So that i can find which window i'll have to re-enable on close...
win.Show(); //Function of the window object
}

window.prototype.DisableWindow=function()
{
//As stated before, i use the hiding way
this.mainDivElement.style.visibility='hidden';
}

window.prototype.EnableWindow=function()
{
this.mainDivElement.style.visibility='';
}


window.prototype.Close=function ()
{
if (this.IsModal)
{
//Re-enable my parent.
this.Parent.EnableWindow();
}
//Standard close processing
.....
}

window.prototype.Show=function()
{
//Standard show processing
...
}


Just a thought.

[jdupont092]

DP

[slobo]

I have the same problem
modal windows not being really modal

just a trivial example, with a MessagBox:
if I have two windows
and I show a MessageBox
the MessageBox goes BEHIND one of the windows
so it is not visible to the user...

[2.0rc1]

[mystix]

I have the same problem
modal windows not being really modal

just a trivial example, with a MessagBox:
if I have two windows
and I show a MessageBox
the MessageBox goes BEHIND one of the windows
so it is not visible to the user...

[2.0rc1]

you might want to post in the 2.0 Bugs forum instead with a link back to this thread.

[slobo]

my previous entry was a fault alarm
sorry

in the desktop sample, the x-desktop CSS class NEEDS the
position: relative;
style (it has), otherwise the z-index stack gets confused...

but the taskbar and the start menu is still accessible
in case of a modal window...

[slobo]

modal windows can still be bypassed with the TAB key in 2.0 final

[kato]

any news? i too was hoping that this would be taken with a bit more consideration in 2.0...

[dancas]

This bug was not solved yet?

[thejoker101]

I have the same problem
modal windows not being really modal

just a trivial example, with a MessagBox:
if I have two windows
and I show a MessageBox
the MessageBox goes BEHIND one of the windows
so it is not visible to the user...

[2.0rc1]

Not sure if you figured this out, but I had posted a thread about this a couple days ago and Jack replied yesterday saying to set the zseed on your WindowGroup to something lower. Or I just learned there's a default WindowMgr (hadn't noticed it and I think all the desktop examples use their own WindowGroup).