YUI modal panel with non-standard background mask value.

Question

I am trying to setup a modal YUI panel above a YUI Tabview. For CSS purposes [1] the tabs have a z-index that goes up to about 20 (depending on how many tabs there are).

The problem I am facing is that the mask that YUI draws for the modality of the panel is behind whatever nonzero mask the tabs have, and so the tabs peek through.

So far I have only found YUI API methods to change the mask of the dialog or panel.

Does anyone know how I can do this for the mask? Has anyone had an issue like this before?

I will shortly be posting the code I used.

TIA!

[1] (CSS designer did this, so I can't change the markup)

Answer 1

Looks like configuration value zIndex (for the Panel) combined with the stackMask should do it.

Nothing in the docs about whether stackMask should be called before or after rendering, before or after show etc. There is also an event (configzIndex) which fires when the zIndex property is changed.

Answer 2

The solution is - after show/render of top modal dialog, call hideMask() for underlying modal dialog - before canceling top modal dialog, call showMask() for underlying modal dialog

Tip: If calling hide/show mask too early and/or too late, mask "flashing" may be experienced visually.