Modals

The modals are used everywhere on the website to notify users about promotions or issues

Below you will find the different definitions and options to modals

Table of contents

Overview

Modals are visible, until the user closes the modal

Modals can be setup to display information, contain a form or contain a video. Modals do not have any Javascript functionality setup with cookies so developers would have to build that themselves.

Display modal on load

Modals can be displayed on page load

<div id="modalOnLoad" class="msds-modal msds-modal--banner-center text-left">
    <a
        class="msds-modal__close text-decoration-none msds-btn-floating msds-btn-floating--lg msds-btn-floating--secondary">
        <svg class="msds-icon">
            <use href="../../msds-spritemap.svg#cross" />
        </svg>
    </a>
    <div class="msds-modal__overlay">
        <div class="msds-modal__content container">
            <div class="msds-modal__banner d-md-flex justify-content-md-center">
                <div class="msds-applications msds-rich-icon" title="Applications"></div>
            </div>
            <div class="msds-modal__headline msds-text-header-2 msds-text-gray-10 
                d-flex justify-content-sm-center justify-content-md-start justify-content-lg-center
                text-sm-center text-lg-left text-xl-center">
                Commodo nunc quam et ligula ut nec pulvinar justo malesuada
            </div>
            <div class="msds-modal__description msds-text-body-1 msds-text-gray-9 
                d-flex justify-content-sm-center justify-content-md-start justify-content-lg-center
                text-sm-center text-lg-left text-xl-center">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor
                nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit
                amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis
                libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante
                ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis.
            </div>
            <div class="msds-modal__cta msds-btn-group--right">
                <button type="button" class="msds-btn msds-btn--secondary">Cancel</button>
                <button type="button" class="msds-btn msds-btn--danger">Delete</button>
            </div>
        </div>
    </div>
</div>

    //Initialize the modal on page load
    if (document.querySelector('#modalOnLoad')) {
        const modalOnLoad = new msdsModal('modalOnLoad', {})
        modalOnLoad.showModal()
    }

Display modal on click event

Modals can be displayed on click events

<button class="show-modal msds-btn msds-btn--primary">Show Modal</button>

<div id="modalOnClick" class="msds-modal text-left">
    <a class="msds-modal__close text-decoration-none msds-btn-floating 
        msds-btn-floating--lg msds-btn-floating--secondary">
        <svg class="msds-icon">
            <use href="../../msds-spritemap.svg#cross" />
        </svg>
    </a>
    <div class="msds-modal__overlay">
        <div class="msds-modal__content container">
            <div class="msds-modal__banner d-md-flex justify-content-md-center">
                <div class="msds-applications msds-rich-icon" title="Applications"></div>
            </div>
            <div class="msds-modal__headline msds-text-header-2 msds-text-gray-10 
                d-flex justify-content-sm-center justify-content-md-start justify-content-lg-center
                text-sm-center text-lg-left text-xl-center">
                Commodo nunc quam et ligula ut nec pulvinar justo malesuada
            </div>
            <div class="msds-modal__description msds-text-body-1 msds-text-gray-9 
                d-flex justify-content-sm-center justify-content-md-start justify-content-lg-center
                text-sm-center text-lg-left text-xl-center">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor
                nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit
                amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis
                libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante
                ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis.
            </div>
            <div class="msds-modal__cta msds-btn-group--right">
                <button type="button" class="msds-btn msds-btn--secondary">Cancel</button>
                <button type="button" class="msds-btn msds-btn--danger">Delete</button>
            </div>
        </div>
    </div>
</div>

    //Initialize the modal on click events
    if (document.querySelector('#modalOnClick')) {
        const modalOnClick = new msdsModal('modalOnClick', {
        linkElementClass: 'show-modal'
        })
    }