---
name: "up:layer:open"
area: "API"
kind: "DOM event"
parent: "up.layer module"
url: "https://unpoly.com/api/up:layer:open"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.layer module](https://unpoly.com/api/up.layer.md)</nav>

# up:layer:open

This event is emitted before an overlay is [opened](https://unpoly.com/learn/opening-overlays.md).

At emission time, the overlay is not yet part of the [layer stack](https://unpoly.com/api/up.layer.stack.md). The overlay's elements have not yet been placed in the DOM. Listeners can prevent this event to prevent the overlay from opening.

The event is emitted on the `document`.

<nav aria-label="Guides">

- [Learn: Opening overlays](https://unpoly.com/learn/opening-overlays.md)

</nav>

## Changing layer options {#changing-layer-options}

Listeners can inspect and manipulate options for the overlay that is about to open.

For example, to give overlays the CSS class `.warning` if the initial URL contains the word `"confirm"`:

```js
up.on('up:layer:open', function(event) {
  if (event.layerOptions.url.includes('confirm')) {
    event.layerOptions.class = 'warning'
  }
})
```

---

## Event properties {#properties}

### event.layerOptions {#event.layerOptions}

(required)

Options for the overlay that is about to open.

Listeners can inspect and change the options. All options for [`up.layer.open()`](https://unpoly.com/api/up.layer.open.md) can be used.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

### event.origin {#event.origin}

(required)

The link element that is opening the overlay.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)

### event.preventDefault() {#event.preventDefault}

(required)

Prevents this overlay from opening.

Programmatic callers will reject with an `up.Aborted` error.