generic-dialog

WAI ARIA Practices

A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert.

API:

name type
close-on-escape boolean
close-on-outside-click boolean
name detail
dialog-opened boolean
dialog-closed boolean
name description
invoker Provide a button element to open the dialog. When the dialog is closed, focus will be reset to the invoker node
content Provide content nodes for the dialogs content

Usage:

You can use the dialog through a JavaScript API or as a web component.

Usage as web component:

Show code

  closebtn.addEventListener('click', () => {
    myDialog.close();
  });
    

Im used as a web component!

dialog content

Usage as web component, closes on escape:

Show code

  closebtn.addEventListener('click', () => {
    myDialog.close();
  });
    

Im used as a web component!

dialog content

Usage as web component, closes on escape and outside click:

Show code

  closebtn.addEventListener('click', () => {
    myDialog.close();
  });
    

Im used as a web component!

dialog content

Usage via JavaScript API:

Closes on escape, and outside click:

Show code

import { dialog } from '@generic-components/components';
defaultExample.addEventListener('click', (e) => {
  dialog.open({
    invokerNode: e.target,
    content: (dialogNode) => {

      dialogNode.innerHTML = 'default example, closes on escape, and on outside click';

      const button = document.createElement('button');
      button.innerHTML = 'close';

      button.addEventListener('click', () => {
        dialog.close();
      })

      dialogNode.appendChild(button);
    }
  });
});
          


Closes on escape:

Show code

import { dialog } from '@generic-components/components';
closeOnEscape.addEventListener('click', (e) => {
  dialog.open({
    invokerNode: e.target,
    closeOnOutsideClick: false,
    content: (dialogNode) => {

      dialogNode.innerHTML = 'only closes on escape';
      const button = document.createElement('button');
      button.innerHTML = 'close';

      button.addEventListener('click', () => {
        dialog.close();
      })

      dialogNode.appendChild(button);
    }
  });
});
          


Only closes on button click:

Show code

import { dialog } from '@generic-components/components';
closeOnButtonClick.addEventListener('click', (e) => {
  dialog.open({
    invokerNode: e.target,
    closeOnEscape: false,
    closeOnOutsideClick: false,
    content: (dialogNode) => {

      dialogNode.innerHTML = 'doesnt close on escape or outside click';
      const button = document.createElement('button');
      button.innerHTML = 'close';

      button.addEventListener('click', () => {
        dialog.close();
      })

      dialogNode.appendChild(button);
    }
  });
});
          


Rendered with lit-html:

Show code

import { dialog } from '@generic-components/components';
import { render, html } from 'lit-html';
litHtml.addEventListener('click', (e) => {
  dialog.open({
    invokerNode: e.target,
    content: (dialogNode) => {

      render(html`
        <h1>Im rendered by lit-html!</h1>
        <button @click=${() => dialog.close()}>Close</button>
        <button @click=${() => dialog.close()}>Close</button>
        <button @click=${() => dialog.close()}>Close</button>
      `, dialogNode);
    }
  });
});