@ou-imdt/css/docs/native/dialog.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# dialog

The dialog element can be used for interactive dialogs with the user, for example; dismissible alerts, inspectors, or subwindows.

Use the '.showModal()' Javascript function to control visibility rather than the 'open' attribute (there is no backdrop when using the attribute -> so use that method if you don't want a backdrop).

tabindex __MUST NOT__ be used on the dialog element.

For some insane reason the ::backdrop pseudo element that allows for styling the dialog backdrop doesn't inherit custom properties, so any custom props or styles must be set directly, so add the below snippet (which is in the index.css) to custom themes with theme prefixes and adjust as needed

```css
dialog::backdrop {
    background: #000000;
    opacity: 0.5;
}
```

You can also prevent scrolling when a dialog is open with the following snippet.

```css
:has(dialog[open]) {
  overflow: hidden;
}
```

You can experiment with scrollbar behaviour using the `scrollbar-gutter: stable` css property.

_If there are issues with assistive technology you can use the a11y-dialog polyfill._

## Example

<div class="card">
  <button id="btn1" onclick="document.getElementById('dia1').showModal()">Open Dialog 1</button>
  <p>Dialog 1 has been closed <b id="count">0</b> times.</p>
  <dialog id="dia1"
    onclose="getElementById('count').innerText = Number(getElementById('count').innerText)+1">
    <p>Greetings, one and all!</p>
    <form method="dialog">
      <button>OK</button>
    </form>
  </dialog>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <button id="btn1" onclick="document.getElementById('dia1').showModal()">Open Dialog 1</button>
  <p>Dialog 1 has been closed <b id="count">0</b> times.</p>
  <dialog id="dia1"
    onclose="getElementById('count').innerText = Number(getElementById('count').innerText)+1">
    <p>Greetings, one and all!</p>
    <form method="dialog">
      <button>OK</button>
    </form>
  </dialog>
```

</details>