Go to homepage

Projects /


Overlay informing user about tasks or decisions.

View Demo

How to

The Dialog component is an overlay element displayed when the user is asked to take a decision or perform a task. Although the main window remains visible, the user must interact with the dialog to return to the main application.

To connect the dialog to its trigger (e.g., button), make sure the id value of the first one is equal to the aria-controls value of the second one.

Animations #

If you want to disable the animations, remove the data-animation="on" attribute. If you do that, the dialog appears with no transition whatsoever.

Custom Events #

If you need to open a dialog element without a trigger element, you can use the openDialog custom event.

Here's how you can use this custom event:

function openDialog(element) {
  var event = new CustomEvent('openDialog');

var dialog = document.getElementsByClassName('js-dialog');
//open first dialog available in your page

You can also pass the element you want the focus to be moved to when the dialog element is closed:

function openDialog(element, focusElement) {
  var event = new CustomEvent('openDialog', { detail: focusElement });

You can use the closeDialog event if you need to close the dialog without using a close button:

function closeDialog(element) {
  var event = new CustomEvent('closeDialog');

var dialog = document.getElementsByClassName('js-dialog');
//closefirst dialog available in your page

You can listen to the opening/closing of a dialog element using the two custom events dialogIsOpen and dialogIsClose that are emitted when the dialog is open/close.


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.