🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%


Overlay informing user about tasks or decisions.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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.

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

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 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.


Project duplicated

Project created

Globals imported

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