The problem with modal dialogue for opening a secondary dialogue

Question

I have a modal dialog form in which there are some “help links” that should open other modeless panels or dialogs on top of it (while keeping the main dialog otherwise modal).

However, they always find themselves behind the mask. YUI seems to recognize the highest z-index there, and setting the mask and modal dialog will be higher.

If I wait for the help content dashboard, I can set them to a higher z index. So far, so good. The problem is that the fields inside the secondary, modeless dialogs cannot be non-orientable. The modal dialogue below them seems to somehow prevent the focus from moving on to anything that is not in the original modal dialogue.

It would also be acceptable if I could execute this “interactive group modality” using jQuery if the YUI just wouldn't allow it.

Help!

Answer 1

By default, YUI manages the z-index of everything that extends YAHOO.widget.Overlay and uses the overlap panel. This is done using the YAHOO.widget.Overlay "bringToTop" method. You can disable this by simply changing the "bringToTop" method to an empty function:

 YAHOO.widget.Overlay.prototype.bringToTop = function() { }; 

This code will disable it forever, and you can simply put it at the end of the container.js file. I believe that this approach will be too large than the sledgehammer method, so we extend the YUI classes and after calling "super.constuctor" we write:

 this.bringToTop = function() { }; 

If you do this, you are essentially telling YUI that you will manage the z-indexes of your elements yourself. This is probably good, but something to consider before doing this.

Answer 2

The original dialog box cannot be modal if the user must interact with other elements - this is the definition of modal. Does the original dialog really have to be modal? If so, did you try to switch the modal property of the original dialog before opening other elements?