Edit this page

up.layer [up-dismiss]
HTML selector

Dismisses the current layer when this element is clicked or submitted.

The relaxed JSON value of the [up-dismiss] attribute becomes the overlay's dismissal value.

Closing overlays

On a button

To dismiss the current layer when a button is clicked, use an [up-dismiss] attribute:

<button up-dismiss>Close overlay</button>

This button will dismiss the overlay with the value { id: 5 }:

<button up-dismiss="{ id: 5 }">Choose user #5</button>

See Closing when a button is clicked.

When reusing a page within an overlay it can be useful to have a button that closes the overlay, but navigates somewhere else on the root layer.

In this case you can use a hyperlink (<a>) with a fallback URL in its [href] attribute:

<a href="/list" up-dismiss>Finish</a>

Unpoly will only navigate to /list when this link is clicked in the root layer. In an overlay the click event is prevented and the overlay is accepted.

See Closing when a link is followed.

On a form

To dismiss an overlay when a form is submitted, set an [up-dismiss] attribute on the <form> element. This will immediately dismiss the overlay on submission, without making a network request:

<form up-dismiss> <!-- mark: up-dismiss -->
  ...
</form>

The form's field values will become the dismissal value of the closed overlay, as an up.Params value.

See Closing when a form is submitted.


Modifying attributes

Dismissal

[up-dismiss]
optional

On buttons on links, the overlay's dismissal value as a relaxed JSON string.

[up-confirm]
optional

A message the user needs to confirm before the layer is closed.

Animation

[up-animation='fade-out']
optional

The name of the closing animation.

[up-duration=175]
optional

The duration of the closing animation in milliseconds.

[up-easing='ease']
optional

The timing function that controls the closing animation's acceleration.