Modal

The Modal component lets users carry out an action without losing the context of the page they are on.

Demo

<div class="eds-c-modal__wrapper">
     <div data-modal-for="example-modal" class="eds-c-modal__trigger">
        {{#with render-button}}
            {{> eds-c-button}}
        {{/with}}
     </div>
    {{>eds-c-modal }}
</div>

When to use this component

Use the Modal component to create short, purposeful interactions where a user can choose to open the modal.

Use modals sparingly. They can be difficult to use and cause frustration and distraction.

Consider using a separate page instead of a modal.

When not to use this component

Do not use modals when a user cannot choose whether to open the modal or not.

For example, do not trigger a modal after a certain amount of time on page or on scroll.

Do not place a form inside a modal.

How it works

Use a class name of .js on the document root element to make the modal look as expected when JavaScript is enabled.

The .js class must be added using the following script:

<script defer>
    // JS Detection Script
    (function(e){var t=e.documentElement,n=e.implementation;t.className='js';})(document)
</script>

Place the script as far up in the of the document as possible.

Installation

To install the components, go to the get started guide for developers.

Styles

Import styles of the Modal component into your scss file:

// enhanced.scss
@import '../path/to/@springernature/elements/components/eds-c-modal';

Javascript

import EdsCModal from '@springernature/eds-c-modal';

const modalElement = document.querySelector('#example-modal'); 
  
 // For multiple modals, prefer `document.querySelectorAll('[data-component-modal]');` and initilise on each instance
const exampleModal = new EdsCModal(modalElement);

// Programmatically opens the modal
exampleModal.open();

// Programmatically closes the modal
exampleModal.close();

Properties

Help improve this page