---
area: "Learn"
parent: "Getting started chapter"
url: "https://unpoly.com/learn/start/overlays"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [Getting started chapter](https://unpoly.com/learn/start/overview.md)</nav>

# Open an overlay

Any link can open its destination in an overlay, like a modal dialog. The linked screen needs no changes for this: it stays a regular page on your server.

## Opening a modal {#opening-a-modal}

Add an [`[up-layer=new]`](https://unpoly.com/api/up-layer-new.md) attribute to a link:

```html
<a href="/users/new" up-layer="new">Add user</a>
```

When clicked, Unpoly fetches `/users/new`, extracts the response's [main fragment](https://unpoly.com/api/main.md) and shows it in a modal overlay. The page behind the overlay **keeps its state**, including unsaved form fields and scroll positions.

The user can dismiss the overlay by pressing `Escape`, by clicking the backdrop, or with its close button.

## One screen, two contexts {#one-screen-two-contexts}

`/users/new` remains a working route. When the user opens it directly, or in a new tab, it renders as a full page. The same screen works embedded in an overlay and standing on its own, **without knowing the difference**.

Overlays can also close automatically when the user completes their task, passing a result value to the page behind them.

<nav aria-label="Reading order">

- [Previous: Submit a form](https://unpoly.com/learn/start/forms.md)
- [Next: Enhance an element](https://unpoly.com/learn/start/elements.md)

</nav>