---
name: "X-Up-Open-Layer"
area: "API"
kind: "HTTP header"
parent: "up.protocol module"
visibility: "experimental"
url: "https://unpoly.com/api/X-Up-Open-Layer"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.protocol module](https://unpoly.com/api/up.protocol.md)</nav>

# X-Up-Open-Layer

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

The server can send this response header to force its response to [open a new overlay](https://unpoly.com/learn/opening-overlays.md).

## Basic example {#basic-example}

The following will select the [main](https://unpoly.com/api/main.md) element from the HTML payload and open it with a basic `modal` overlay:

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

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

## Custom layer options {#options}

When `X-Up-Open-Layer` is used without options, the new overlay will have the [default mode](https://unpoly.com/api/up.layer.config.md#config.mode) (`modal`), select a [main target](https://unpoly.com/api/main.md) and use [default navigation options](https://unpoly.com/api/up.fragment.config.md#config.navigateOptions).

You can customize the target and appearance of the new overlay, by setting the header value to a [relaxed JSON](https://unpoly.com/api/relaxed-json.md) string with render options:

```http
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()`](https://unpoly.com/api/up.layer.open.md) are supported.

### Callback options {#callbacks}

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

```http
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](https://unpoly.com/learn/script-security.md#callback-nonces):

```http
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:

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