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: (dialogOverlayNode, dialogNode) => {

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

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

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

      dialogOverlayNode.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: (dialogOverlayNode, dialogNode) => {

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

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

      dialogOverlayNode.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: (dialogOverlayNode, dialogNode) => {

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

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

      dialogOverlayNode.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: (dialogOverlayNode, 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>
      `, dialogOverlayNode);
    }
  });
});