---
name: modal
category: overlays
summary: "Dialog with overlay, focus trap and scroll lock"
subpath: "@42/core/modal"
---

Dialog with overlay, focus trap, scroll lock.

```html
<div data-c42-modal>
  <button data-c42-modal-trigger>Open</button>
  <div data-c42-modal-overlay>
    <div data-c42-modal-content>
      <button data-c42-modal-close>×</button>
      <p>Modal body</p>
    </div>
  </div>
</div>
```

```ts
import { Modal } from '@42/core/modal';
new Modal(root, { closeOnOverlayClick: true, closeOnEscape: true, lockScroll: true });
```

Options: `closeOnOverlayClick`, `closeOnEscape`, `lockScroll`, `defaultOpen`
Events: `modal:open`, `modal:close`