---
name: "up:layer:opened"
area: "API"
kind: "DOM event"
parent: "up.layer module"
url: "https://unpoly.com/api/up:layer:opened"
---
<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:opened

This event is emitted after a new overlay was placed into the DOM.

<nav aria-label="Guides">

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

</nav>

## Customizing the overlay appearance {#customizing-the-overlay-appearance}

The event is emitted right before the opening animation starts. Because the overlay has not yet been painted by the browser, this is a good occasion to [customize overlay elements](https://unpoly.com/learn/customizing-overlays.md#customizing-overlay-elements):

```js
up.on('up:layer:opened', function(event) {
  if (isChristmas()) {
    up.element.affix(event.layer.element, '.santa-hat', { text: 'Merry Christmas!' })
  }
})
```

See [Customizing overlays](https://unpoly.com/learn/customizing-overlays.md) for other methods to change the overlay appearance.

---

## Event properties {#properties}

### 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.layer {#event.layer}

(required)

The [layer object](https://unpoly.com/api/up.Layer.md) that is opening.

Type: [up.Layer](https://unpoly.com/api/up.Layer.md)