CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

Dialog

Overlay informing user about tasks or decisions.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

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');
  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 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

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.