Edit this page

up.layer up.layer.config
Configuration object

Configures default attributes for new overlays.

All options for up.layer.open() may be configured. The configuration will also be used for [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).

Example

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:

up.layer.config.overlay.mainTargets.unshift('.content')

Configuration inheritance


Value

[config.mode='modal']
optional

The default mode used when opening a new overlay.

string
config.any

Defaults for all layer modes.

config.any.mainTargets

An array of CSS selectors matching default render targets.

This is an alias for up.fragment.config.mainTargets.

Array<string>
config.root

Defaults for the root layer.

Inherits from up.layer.config.any.

config.root.mainTargets

An array of CSS selectors matching default render targets for the root layer, but not for overlays.

config.overlay

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

The opening animation.

stringFunction
config.overlay.openDuration

The duration of the opening animation.

number
config.overlay.openEasing

The easing function for the opening animation.

string
config.overlay.closeAnimation

The closing animation.

stringFunction
config.overlay.closeDuration

The duration of the closing animation.

number
config.overlay.closeEasing

The easing function for the closing animation.

string
config.overlay.dismissLabel

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

string
config.overlay.dismissARIALabel

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

string
[config.overlay.history='auto']
optional

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.

stringboolean
config.overlay.trapFocus

Whether to trap focus within the overlay while it is in front.

By default focus is trapped for all overlays except popups.

boolean
[config.overlay.class]
optional

An HTML class for the overlay's container element.

See overlay classes.

string
config.modal

Defaults for modal overlays.

Inherits from up.layer.config.overlay and up.layer.config.any.

config.cover

Defaults for cover overlays.

Inherits from up.layer.config.overlay and up.layer.config.any.

config.drawer

Defaults for drawer overlays.

Inherits from up.layer.config.overlay and up.layer.config.any.

config.popup

Defaults for popup overlays.

Inherits from up.layer.config.overlay and up.layer.config.any.

config.foreignOverlaySelectors

An array of CSS selectors matching overlays not constructed by Unpoly.

Other JavaScript libraries often attach their overlay elements to the end of the <body>, which makes Unpoly consider these overlays to be part of the root layer. This can cause Unpoly to steal focus from foreign overlays, or cause Unpoly overlays to incorrectly close when the foreign overlay is clicked. Adding a selector to this array will cause Unpoly to be less opinionated about user interactions within matching elements.

By default this contains a selector matching the <dialog> element.

Array<string>