How to create loading mask on a XUL panel using JQuery or JScript

does anyone know how to create a loading mask over a XUL panel with JQuery or normal Javascript?

i am developing a firefox extension and i need the loading mask ov开发者_如何学Goer some of the panels to avoid the user from making any further input while information is being submitted.

First of, i don't really know if mozilla supports loading masks over XUL panels because all the JQuery scripts i tried so far make the panel disappear instead of masking it.

thanks for reading

XUL uses box layout which makes typical techniques from HTML like absolutely positioned divs malfunction. You should use a XUL <stack> tag (see https://developer.mozilla.org/en/XUL/stack) and put both your content and your half-transparent layer as its children. When you make the half-transparent layer visible it will appear on top of the content. For example:

<stack flex="1">
  <hbox id="content" align="center" pack="center">
     <button label="Click here" oncommand="document.getElementById('busy').hidden = false;"/>
  </hbox>
  <hbox id="busy" hidden="true"/>
</stack>

And some CSS code:

#busy {
  background-color: black;
  opacity: 0.5;
}