# Modal

Source: https://iriscss.com/documentation/components/modal/

A `dialog` drawn as a card over a dimmed page. It animates in and out, and the page stops scrolling while it is open.

The dialog is a [card](https://iriscss.com/documentation/components/card/index.html.md), and a direct `header` or `footer` becomes a band. Open it with a button that has `command="show-modal"`, and close it with `command="close"`. `Esc` closes it too, and `closedby="any"` adds a click outside, where the browser supports it. No script is needed.

```html
<button class="primary" commandfor="modal-example" command="show-modal">Open modal</button>
<dialog id="modal-example" closedby="any" aria-labelledby="modal-example-title">
  <header>
    <button class="close" commandfor="modal-example" command="close" aria-label="Close"></button>
    <h3 id="modal-example-title">Delete project?</h3>
  </header>
  <p>The project and its files are deleted for good.</p>
  <footer>
    <button class="secondary" commandfor="modal-example" command="close">Cancel</button>
    <button class="danger" commandfor="modal-example" command="close">Delete</button>
  </footer>
</dialog>
```

`.close` on a button in the header draws an X at the end. A link with `rel="prev"` gets the same look, for a modal that has its own URL.

## Return a value

Buttons in a `<form method="dialog">` close the dialog and set its `returnValue` to the button value.

```html
<button commandfor="modal-form" command="show-modal">Choose a plan</button>
<dialog id="modal-form" aria-label="Choose a plan">
  <form method="dialog">
    <p>Which plan do you want?</p>
    <footer>
      <button value="monthly" class="secondary">Monthly</button>
      <button value="yearly" class="primary">Yearly</button>
    </footer>
  </form>
</dialog>
```

## From a script

Browsers without invoker commands ignore `command`. To support them, call the dialog methods from a script.

```js
const dialog = document.getElementById("modal-example");
dialog.showModal();
dialog.close();
```

## Related

A [drawer](https://iriscss.com/documentation/components/drawer/index.html.md) is a modal that slides in from an edge.

## Variables

| Variable | Default |
| --- | --- |
| `--i-modal-max-width` | `43.75rem` |
| `--i-modal-overlay-backdrop-filter` | `blur(0.375rem)` |
| `--i-modal-duration` | `0.3s` |
| `--i-modal-overlay-color-background` | `light-dark(#e8eaedbf, #08090abf)` |