views:

1106

answers:

2

I have a modal dialog form which has some "help links" within it which should open other non-modal panels or dialogs on top of it (while keeping the main dialog otherwise modal). However, these always end up behind the mask. YUI seems to be recognizing the highest z-index out there and setting the mask and modal dialog to be higher than that.

If i wait to panel-ize the help content, then i can set those to have a higher z-index. So far, so good. The problem then is that fields within the secondary, non-modal dialogs are unfocusable. The modal dialog beneath them seems to somehow be preventing the focus from going to anything not in the initial, modal dialog.

It would also be acceptable if i could do this "dialog group modality" with jQuery, if YUI simply won't allow this.

Help!

A: 

The original dialog can't be modal if the user is supposed to interact with other elements—that's the definition of modal. Does the original dialog really need to be modal at all? If so, have you tried toggling the modal property of the original dialog before you open the other elements?

Hank Gay
That would make all the other background elements accessible as well. I need to block access to everything but this set of three dialogs (1 primary, 2 secondary). I can't allow them to do anything else until the primary dialog is completed successfully.
Nathan Bubna
Then I think you may have to write the JavaScript to enforce the quasi-modality yourself; it's nothing I've seen described in any of the docs.
Hank Gay
+3  A: 

By default, YUI manages the z-index of anything that extends YAHOO.widget.Overlay and uses an overlay panel. It does this through the YAHOO.widget.Overlay's "bringToTop" method. You can turn this off by simply changing the "bringToTop" method to be an empty function:

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

That code would turn it off for good and you could just put this at the bottom of the container.js file. I find that approach to be a little bit too much of a sledge hammer approach, so we extend the YUI classes and after calling "super.constuctor" write:

this.bringToTop = function() { };

If you do this, you are essentially telling YUI that you will manage the z-indices of your elements yourself. That's probably fine, but something to consider before doing it.

Bialecki