@springernature/springernature-modal v5.0.0

Springer Nature Modal

Display a modal (pop-up) window

Requirements

A class name of .js on the document root element will be used to bootstrap visual styles for the modal. The class should be added via a micro (but blocking) script, placed as far up in the of the document as possible.

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

Usage

HTML

<button data-modal-for="example-modal" class="c-modal__trigger">Click this button to open the modal</button>

<div data-component-modal id="example-modal" class="c-modal" tabindex="0">
    <div class="c-modal__content">
        <h4 class="c-modal__title">Modal Title</h4>
        <p>This is the modal! It has a <a data-component-modal-close href="">link</a> that can also close it.</p>
        <button data-component-modal-close class="c-modal__close">close modal</button>
    </div>
</div>

Javascript

import Modal from '@springernature/springernature-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);

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

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

CSS

Import the core styles into your main stylesheet

// core.scss
@import '@springernature/springernature-modal/scss/50-components/core';

Import the enhanced settings and styles into your main stylesheet

// enhanced.scss
@import '@springernature/springernature-modal/scss/10-settings/springernature';
@import '@springernature/springernature-modal/scss/50-components/enhanced';

Required markup and attributes