Edit this page

up.layer [up-layer=new]
HTML selector

Follows this link and opens the result in a new overlay.

Example

<a href="/menu" up-layer="new">Open menu</a>

Modifying attributes

Info

All attributes for [up-follow] may also be used.

You may configure default layer attributes in up.layer.config.

[up-layer="new"] optional

Whether to stack the new overlay onto the current layer or replace existing overlays.

See replacing existing overlays.

[up-mode] optional

The kind of overlay to open.

See available layer modes.

[up-size] optional

The size of the overlay.

See overlay sizes for details.

[up-class] optional

An optional HTML class for the overlay's container element.

See overlay classes.

[up-history] optional

Whether the overlay has visible history.

If set to 'true' the overlay location, title and meta tags will be shown while the overlay is open. When the overlay is closed, the parent layer's history is restored.

If set to 'auto' history will be visible if the initial overlay content matches a main target.

If set to 'false', fragments changes within the overlay will never update the address bar. You can still access the overlay's current location using up.layer.location.

See History in overlays.

[up-dismissable] optional

How the overlay may be dismissed by the user.

See customizing dismiss controls for details.

You may enable multiple dismiss controls by passing a space-separated string.

Passing true or false will enable or disable all dismiss controls.

[up-animation] optional

The name of the opening animation.

[up-on-opened] optional

A JavaScript snippet that is called when the overlay was inserted into the DOM.

The snippet runs in the following scope:

Expression Value
this The link that opened the overlay
layer An up.Layer object for the new overlay
event An up:layer:opened event
[up-on-accepted] optional

A JavaScript snippet that is called when the overlay was accepted.

The snippet runs in the following scope:

Expression Value
this The link that originally opened the overlay
layer An up.Layer object for the accepted overlay
value The overlay's acceptance value
response The server response that caused the overlay to close
event An up:layer:accepted event
[up-on-dismissed] optional

A JavaScript snippet that is called when the overlay was dismissed.

The snippet runs in the following scope:

Expression Value
this The link that originally opened the overlay
layer An up.Layer object for the dismissed overlay
value The overlay's dismissal value
response The server response that caused the overlay to close
event An up:layer:dismissed event
[up-accept-event] optional

One or more space-separated event types that will cause this overlay to automatically be accepted when a matching event occurs within the overlay.

The overlay result value is the event object that caused the overlay to close.

See Closing when an event is emitted.

[up-dismiss-event] optional

One or more space-separated event types that will cause this overlay to automatically be dismissed when a matching event occurs within the overlay.

The overlay result value is the event object that caused the overlay to close.

See Closing when an event is emitted.

[up-accept-location] optional

One or more space-separated URL patterns that will cause this overlay to automatically be accepted when the overlay reaches a matching location.

The overlay result value is an object of named segments matches captured by the URL pattern.

See Closing when a location is reached.

[up-dismiss-location] optional

One or more space-separated URL patterns that will cause this overlay to automatically be dismissed when the overlay reaches a matching location.

The overlay result value is an object of named segments matches captured by the URL pattern.

See Closing when a location is reached.

[up-context] optional experimental

The new overlay's context object, encoded as JSON.

[up-position] optional

The position of the popup relative to the { origin } element that opened the overlay.

Supported values are top, right, bottom and left.

See popup position.

[up-align] optional

The alignment of the popup within its { position }.

Supported values are top, right, center, bottom and left.

See popup position.