Edit this page

up.layer up.layer.config
JavaScript property

Configures default attributes for new overlays.

All options for up.layer.open() may be configured. The configuration will also be used for a[up-layer=new] links.

Defaults are configured separately for each layer mode:

Object Effect
up.layer.config.root Defaults for the root layer
up.layer.config.modal Defaults for modal overlays
up.layer.config.drawer Defaults for drawer overlays
up.layer.config.popup Defaults for popup overlays
up.layer.config.cover Defaults for cover overlays

For convenience you may configure options that affect all layer modes or all overlay modes:

Object Effect
up.layer.config.any Defaults for all layers
up.layer.config.overlay Defaults for all overlays

Options configured in such a way are inherited. E.g. when you open a new drawer overlay, defaults from up.layer.config.drawer, up.layer.config.overlay and up.layer.config.any will be used (in decreasing priority).


To make all modal overlays move in from beyond the top edge of the screen:

up.layer.config.modal.openAnimation = 'move-from-top'

To configure an additional main target for overlay of any mode:


Configuration inheritance


[config.mode='modal'] string optional

The default mode used when opening a new overlay.

config.any object

Defaults for all layer modes.

config.any.mainTargets Array<string>

An array of CSS selectors matching default render targets. This is an alias for up.fragment.config.mainTargets.

config.root object

Defaults for the root layer. Inherits from up.layer.config.any.

config.root.mainTargets object
config.overlay object

Defaults for all overlays. In addition to the options documented here, all options for up.layer.open() may also be configured.

Inherits from up.layer.config.any.

config.overlay.openAnimation stringorFunction

The opening animation.

config.overlay.openDuration number

The duration of the opening animation.

config.overlay.openEasing string

The easing function for the opening animation.

config.overlay.closeAnimation stringorFunction

The closing animation.

config.overlay.closeDuration number

The duration of the closing animation.

config.overlay.closeEasing string

The easing function for the opening animation.

config.overlay.dismissLabel string

The symbol for the dismiss icon in the top-right corner.

config.overlay.dismissAriaLabel string

The accessibility label for the dismiss icon in the top-right corner.

config.overlay.history='auto' stringorboolean

Whether the layer's location or title will be visible in the browser's address bar and window title.

If set to 'auto', the overlay will render history if its initial fragment is an auto history target.

If set to true, the overlay will always render history. If set to false, the overlay will never render history.

[config.overlay.class] string optional

An HTML class for the overlay's container element.

See overlay classes.

config.modal object
config.cover object
config.drawer object
config.popup object
This website uses cookies to improve usability and analyze traffic.
I accept or learn more