Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Floating Panels

Floating Panels

A floating panel is used for secondary popups such as tool palettes and property inspector panels. It will have a titlebar which the user may use to move the panel around on the screen. A floating panel can be created using the panel element with at least two additional attributes as in the following example:

<panel id="tools-panel" noautohide="true" titlebar="normal">
  <label control="name" value="Name:"/>
  <textbox id="name"/>
</panel>

The noautohide attribute is used to indicate that the panel is not temporary. When set to true, the popup will not close when the user clicks outside of it, nor when the user presses the Escape key.

The titlebar attribute creates a panel with a titlebar. Currently, only the value normal is supported, which creates a default titlebar. In the future, a distinction will be available to support titlebars of differing styles.

The floating panel can be placed and moved independently of the main window, however it will always appear above the main window. On Mac, floating panels are invisible when another application is made active, and become visible again when the XUL application is made active.

A floating panel may contain any type of element.

A label for the titlebar may be set using the label attribute, as in the following example:

<panel id="info-panel" noautohide="true" titlebar="normal" label="Image Properties">

Closing a Floating Panel

Unlike other panels, a floating panel does not close when clicking outside of it. You can use the close attribute to have a close button on the titlebar. When the user presses it, the popup will be closed.

<panel id="info-panel" noautohide="true" titlebar="normal" label="Image Properties" close="true">

The hidePopup method may be used to manually close a popup. See Closing a Popup for more information about this. The hidePopup method would be used if you wish to place your own close button on the panel, or wish to close the panel in response to a user action.

Document Tags and Contributors

 Contributors to this page: Sheppy, Enn
 Last updated by: Sheppy,