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

Projects

Progress value is 30%

Modal Window

An accessible modal window used to display critical information.

View Demo

Dependencies

All components are based on CodyFrame.

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

How to

Modal windows are dialogs used to display relevant information without losing the context of the page. They should be used with caution because they interrupt the user flow by disabling the main content.

To connect the modal 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 #

Apply one of the following classes to the .modal element to set the entry animation of the modal window:

  • modal--animate-fade: animate the opacity
  • modal--animate-scale: scale up the modal content
  • modal--animate-translate-up: translate up the modal content
  • modal--animate-translate-down: translate down the modal content
  • modal--animate-translate-right: translate right the modal content
  • modal--animate-translate-left: translate left the modal content
  • modal--animate-slide-up: translate up the modal content by 100% of its height (use for content moving in/out the viewport)
  • modal--animate-slide-down: translate down the modal content by 100% of its height
  • modal--animate-slide-right: translate right the modal content by 100% of its width
  • modal--animate-slide-left: translate left the modal content by 100% of its width

The animations will be disabled if the prefers-reduced-motion option is equal to "reduce" on the user's device.

Custom events #

If you need to open a modal element without a trigger element (e.g., you want to show the modal as a consequence of user actions), you can use the openModal custom event.

Here's how you can use this custom event:

function openModal(element) {
  var event = new CustomEvent('openModal');
  element.dispatchEvent(event);
};

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

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

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

You can use the closeModal event if you need to close the modal without using a close button:

function closeModal(element) {
  var event = new CustomEvent('closeModal');
  element.dispatchEvent(event);
};

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

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

var modal = document.getElementsByClassName('js-modal')[0];
modal.addEventListener('modalIsOpen', function(event){
  // modal is open
  // event.detail is the element that triggered the modal opening
});
modal.addEventListener('modalIsClose', function(event){
  // modal is close
});

Focus #

When the modal window is open, the focus is automatically moved to the first focusable element inside the modal.

If you want to specify the element the focus should be moved to, you can add the data-modal-first-focus attribute to the .js-modal element and set its value equal to a unique selector of the element you want to focus. If the element is not focusable, the focus will be moved to the first focusable child.

Overflow #

When the modal is open, you may want to change the overflow behavior of a different element (e.g., the body element) to prevent the underlying content from scrolling while the modal is open.

To do that, add a data-modal-prevent-scroll attribute equal to a unique CSS selector of the element to modify. For example, to target the <body>:

<!--  prevent the body from scrolling when the modal is open  -->
<div class="modal" id="modal-name-1" data-modal-prevent-scroll="body">
  <!-- modal content here -->
</div>

Dynamic Content #

If your modal is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the Modal object:

var modal = document.getElementsByClassName('modal')[0];
new Modal(modal);

Categories

Project duplicated

Project created

Globals imported

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