Fragment updates will render within the current layer by default.
To open the response to a hyperlink in a modal overlay, set an [up-layer=new]
attribute:
<a href="/menu" up-layer="new">Open menu</a> <!-- mark: up-layer -->
The overlay will open with the default mode (a modal dialog).
To use a different mode, like popup
or drawer
, use an [up-mode]
attribute:
<a href="/menu" up-layer="new" up-mode="drawer"> <!-- mark: up-mode -->
As a shorthand you may also append the layer mode to the [up-layer=new]
attribute:
<a href="/menu" up-layer="new drawer"> <!-- mark: new drawer -->
You can change the default layer mode in up.layer.config.mode
.
To show the response to a successful form submission within an overlay, set an [up-layer=new]
attribute:
<form action="/submit" up-layer="new"> <!-- mark: up-layer -->
...
</form>
To only use an overlay for error messages from a failed submission, set an [up-fail-layer=new]
attribute:
<form action="/submit" up-fail-layer="new"> <!-- mark: up-fail-layer -->
...
</form>
The [up-content]
attribute lets you open an overlay without going through the server:
<a up-layer="new popup" up-content="<p>Helpful instructions here</p>"> <!-- mark: up-content -->
Help
</a>
Since we didn't provide an [up-target]
selector, it will be wrapped in a container matching the overlay's main target.
Instead of embedding an HTML string, you can also refer to a template:
<a up-layer="new popup" up-content="#help"> <!-- mark: up-content -->
Help
</a>
<template id="help">
<p>Helpful instructions here</p>
</template>
When rendering fragments from JavaScript, you can pass { layer: 'new' }
to open the fragment in a new overlay:
up.navigate({ url: '/users/new', layer: 'new' })
Instead of up.navigate()
or up.render()
you may also open layers with up.layer.open()
.
It returns a promise for the new up.Layer
instance:
let layer = await up.layer.open({ url: '/users/new' })
Choose a different layer mode by passing a { mode }
option.
To get a promise for an overlay's acceptance value,
use up.layer.ask()
:
let address = await up.layer.ask({ url: '/address-picker' })
The server can force its response to open an overlay, by sending an X-Up-Open-Layer: {}
response header.
This will open an overlay with the default mode, select a main target and use default navigation options:
Content-Type: text/html
X-Up-Open-Layer: {}
<html>
<main>
Overlay content
</main>
</html>
You can customize the target and appearance of the new overlay, by setting the header value to a relaxed JSON string with render options:
Content-Type: text/html
X-Up-Open-Layer: { target: '#menu', mode: 'drawer', animation: 'move-to-right' }
<div id="menu">
Overlay content
</div>
Many options from up.layer.open()
are supported. Options must be JSON-serializable.
When opening an overlay, you may define a condition when the overlay interaction ends. When the condition occurs, the overlay is automatically closed and a callback is run.
See close conditions for details.
By default the new overlay will be stacked on top of the current layer. There is no limit for the number of stacked layers.
You can pass an option [up-layer="swap"]
or [up-layer="shatter"]
to replace existing overlays:
Option | Description |
---|---|
new |
Stacks a new overlay over the current layer. |
swap |
Replaces the current overlay. If no overlay is open, opens an overlay. |
shatter |
Closes all overlays and opens a new overlay. |