Overlays

Modal overlay

The modal overlay is used in our custom dialog binding, and as event listener on click-to-close events of said dialogs.

Example

Example
This is a message

Markup

<button type="button" class="Btn" data-bind="click: dialog4.openDialog">Modal overlay</button>

<div class="Dialog Dialog--modal" data-bind="dialog, isOpen: dialog4.dialogIsOpen">
    <section class="Dialog-header">
        <span>Example</span>
        <button class="Dialog-close Icon Icon--x Icon--standalone Icon--border" data-bind="click: dialog4.closeDialog"></button>
    </section>

    <section class="Dialog-content">
        This is a message

        <button data-bind="click: dialog4.closeDialog" class="Btn Btn--neutral">Close</button>
    </section>
</div>

Invisible overlay

This variant is only used when you want the same behavior as Modal Overlay (close modal when clicking on it), but don't want it to be visible.

Example

Example
This is a message

Markup

<button type="button" class="Btn" data-bind="click: dialog5.openDialog">Modal (invisble) overlay</button>

<div class="Dialog Dialog--modal" data-bind="dialog: { overlayInvisible: true }, isOpen: dialog5.dialogIsOpen">
    <section class="Dialog-header">
        <span>Example</span>
        <button class="Dialog-close Icon Icon--x Icon--standalone Icon--border" data-bind="click: dialog5.closeDialog"></button>
    </section>

    <section class="Dialog-content">
        This is a message

        <button data-bind="click: dialog5.closeDialog" class="Btn Btn--neutral">Close</button>
    </section>
</div>

Loading overlay

.Overlay--loading

The loading overlay should be used when waiting for the application to fetch data and finish initialising.

Example

Loading overlay

Markup

<a id="overlay-working-handle" class="Btn Btn--primary" href="javascript:void(0);">Loading overlay</a>