@springernature/springer-nature-modal v1.0.0

Springer Nature Modal

Display a modal (pop-up) window

Usage

<button data-modal-for="example-modal">Click this button to open the modal</button>
<div data-component-modal id="example-modal" class="c-modal js-hide" tabindex="0">
    <div class="c-modal--content">
        <h4 class="c-modal--title u-mb20">Modal Title</h4>
        <div class="c-modal--body">
            <p>This is the modal! It has a <a data-component-modal-close class="close-modal-link btn-close" href="">link</a> that can also close it.</p>
        </div>
        <button data-component-modal-close class="c-modal--close btn-close link-like">&times;</button>
    </div>
</div>

import Modal from '@springernature/springer-nature-modal';

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

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

Required markup and attributes