Version 0.40.0

UI Organisms

Modals


CSS component

Toggle the as--open class on the sui-o-modal to toggle the animation.

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

<div class="sui-o-modal as--open">
    <div class="sui-o-modal__content">
        <div class="sui-o-modal__header">
            <button type="button" class="sui-o-modal__close" tabindex="-1">
                &times;
            </button>
            <div class="sui-o-modal__title">
                Modal title
            </div>
        </div>
        <div class="sui-o-modal__body">
            <p>
                Lorem ipsum...
            </p>
        </div>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

<div class="sui-o-modal as--open">
    <div class="sui-o-modal__content">
        <div class="sui-o-modal__body">
            <p>
                Lorem ipsum...
            </p>
        </div>
        <div class="sui-o-modal__footer">
            <div class="sui-g-grid">
                <div class="sui-g-grid__item as--pull">
                    <button type="button" class="sui-a-button">
                        Cancel
                    </button>
                </div>
                <div class="sui-g-grid__item as--push">
                    <button type="button" class="sui-a-button as--primary">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

<div class="sui-o-modal as--open">
    <div class="sui-o-modal__content">
        <div class="sui-o-modal__header">
            <button type="button" class="sui-o-modal__close" tabindex="-1">
                &times;
            </button>
            <div class="sui-o-modal__title">
                Modal title
            </div>
        </div>
        <div class="sui-o-modal__body">
            <p>
                Lorem ipsum...
            </p>
        </div>
        <div class="sui-o-modal__footer">
            <div class="sui-g-grid">
                <div class="sui-g-grid__item as--pull">
                    <button type="button" class="sui-a-button">
                        Cancel
                    </button>
                </div>
                <div class="sui-g-grid__item as--push">
                    <button type="button" class="sui-a-button as--primary">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
Modifier as--size-xxs:
Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Modifier as--size-xs:
Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Modifier as--size-sm:
Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Modifier as--size-lg:
Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Modifier as--size-xl:
Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Modifier as--size-xxl:
Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Modifier as--size-fullscreen:
Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?


JS component

Examples

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

How to use

Add the data-sui-o-modal="myModal" attribute on your button (where myModal is the ID of the modal),

<button class="sui-a-button" data-sui-o-modal="myModal">
    ...
</button>

Then add the Modal HTML,

<div class="sui-o-modal" id="myModal">
    ...
</div>

And enable the JS plugin.

import { Modal } from 'saagie-ui';

const myElement = document.getElementbyId('myModal');

new Modal(myElement, { /* options */ }).init();

Options

Default options:

{
    openClass: 'as--open',
    dataAttrBase: 'data-sui-o-modal',
    dataAttrSuffixToggle: '',
    dataAttrSuffixOpen: '-open',
    dataAttrSuffixClose: '-close',
    dataAttrSuffixConfirm: '-confirm',
    dataAttrClicksEnabled: true,
    htmlToBodyEnabled: true,
    focusRecoverEnabled: true,
    keysEnabled: true,
    confirmOnEnterKey: false,
    closeOnEscapeKey: true,
    clickOutsideEnabled: false,
    onInit: function () {},
    onOpen: function () {},
    onConfirm: function () {},
    onClose: function () {},
    onEnterKey: function () {},
    onEscapeKey: function () {},
    onDestroy: function () {},
}

Methods

init()

Init the modal.

const modal = new Modal(myElement, { /* options */ }).init();

toggle()

Open/Close the modal.

modal.toggle();

open()

Open the modal.

modal.open();

close()

Close the modal.

modal.close();

bindClickOutside() / unbindClickOutside()

Add / Remove event listener click outside the component.

modal.bindClickOutside();
modal.unbindClickOutside();

bindDataClicks() / unbindDataClicks()

Add / Remove event listeners for data attributes clicks.

modal.bindDataClicks();
modal.unbindDataClicks();

bindEvents() / unbindEvents()

Add / Remove event listeners for 'toggle', 'open', 'close', 'confirm', 'destroy' events.

modal.bindEvents();
modal.unbindEvents();

bindKeys() / unbindKeys()

Add / Remove event listeners for keys inputs.

modal.bindKeys();
modal.unbindKeys();

destroy()

Destroy all eventListeners.

modal.destroy();