dialog-position

A stylesheet to easily position a native HTML <dialog> element on the page, to use as the basis for any accessible modal overlay.

• Demo: CodePen - @nfreear/pen/dPyLYyN

data-position attribute

The following values are supported for the data-position attribute:

# These values result in a full width modal:
top
bottom
# These result in a full height modal:
left
right
# These result in a modal positioned in one corner:
top-left
top-right
bottom-left
bottom-right

Usage

Set the data-position attribute on a <dialog> element, to position it.

Directly link from a CDN:

<link rel="stylesheet" href="https://unpkg.com/dialog-position@^1/index.css">

<dialog data-position="bottom">
  <h2>My overlay</h2>
  …
</dialog>

With Webpack and css-loader:

import 'dialog-position/style';

// …

const dialog = document.querySelector('#myDialogId');
dialog.showModal();

Position programmatically:

import { showModal, position } from 'dialog-position';

showModal('myDialogId', { position: position.bottomRight });

Why?

Making modal dialogs accessible is not easy — see the W3C’s dialog.js file for the modal APG pattern for an example of what’s involved.

Using a native <dialog> for the modal overlays in your web site or app has significant benefits:

• A clearly defined API,
• Fully stylable with CSS,
• Well supported by browsers,
• Built-in accessibility, including keyboard and screen reader accessibility.

If you still prefer a non-native dialog, please consider using a library built with accessibility in mind, such as Kitty Giraudel’s a11y-dialog.

Acknowledgements

Thanks to contributors on Stackoverflow for inspiration!