X-Up-Open-Layer

The server can send this response header to force its response to open a new overlay.

Basic example

The following will select the main element from the HTML payload and open it with a basic modal overlay:

Content-Type: text/html
X-Up-Open-Layer: {}

<html>
  <main>
    Overlay content
  </main>
</html>

Custom layer options

When X-Up-Open-Layer is used without options, the new overlay will have the default mode (modal), select a main target and use default navigation options.

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: 'fade-in' }

<div id="menu">
  Overlay content
</div>

Many options from up.layer.open() are supported.

Callback options

Callbacks like { onAccepted } or { onDismissed } can be passed as a string of JavaScript:

Content-Type: text/html
X-Up-Open-Layer: { onAccepted: 'up.reload("#users-list")' }

With a strict CSP you can prefix your callback with a nonce:

Content-Type: text/html
X-Up-Open-Layer: { onAccepted: 'nonce-secret123 up.reload("#users-list")' }

To only reload an element after the overlay closes, pass a selector as { onAcceptedReload } or { onDismissedReload }. This runs no JavaScript, so it needs no nonce:

Content-Type: text/html
X-Up-Open-Layer: { onAcceptedReload: '#users-list' }