Dialog

Overlay informing user about tasks or decisions.

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');
  element.dispatchEvent(event);
};

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

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 });
  element.dispatchEvent(event);
};

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');
  element.dispatchEvent(event);
};

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

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.

Categories

• Overlays

Bug report & feedback

Component Github page ↗