Modal

Modal allows you to display any kind of content in a modal popup.
Requires the Button, Elements and Helpers module for proper appearance.

HTML

<div class="mdf-modal" aria-modal="true">
    <div class="mdf-modal__content">
        <!-- Your content here -->
    </div>

    <button class="mdf-button mdf-button--icon mdf-modal__close" aria-label="Close modal">
        <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
            <use href="./assets/images/icons.svg#clear"></use>
        </svg>
    </button>

    <div class="mdf-modal__backdrop"></div>
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/modal/styles';

// Configure appearance
@use '@miraidesigns/modal' with (
    $variable: value
);

@include modal.styles();

TypeScript

import { MDFModal } from '@miraidesigns/modal';

const modal = new MDFModal(document.querySelector('.mdf-modal'));
modal.open();

Examples

Dynamic content

Its very easy to add content to the modal.
In the example below we will create a baby Lightbox.

import { MDFModal } from '@miraidesigns/modal';

const modal = new MDFModal(document.querySelector('.mdf-modal'));

// Here we loop through our hypothetical list of image links.
for (const link of document.querySelectorAll('a.img-link')) {
    // We listen for the click event.
    link.addEventListener('click', (evt: MouseEvent) => {
        // Prevent the default link behavior.
        evt.preventDefault();
    
        // The link's `href` attribute holds the URL to our image file.
        const src = (link as HTMLLinkElement).href;

        // Now we simply insert an `<img>` tag with our `src`.
        modal.insertHTML(`<img src="${src}">`);

        // And open the modal.
        modal.open();
    });
}

Requests

You may request content from a different URL to populate the modal.

HTML

<div class="mdf-modal" aria-modal="true">
    <div class="mdf-modal__content mdf-modal__content--padded">
        <div class="mdf-modal__loading"></div>
    </div>

    <button class="mdf-button mdf-button--icon mdf-modal__close" aria-label="Close modal">
        <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
            <use href="./assets/images/icons.svg#clear"></use>
        </svg>
    </button>

    <div class="mdf-modal__backdrop"></div>
</div>

TypeScript

import { MDFModal } from '@miraidesigns/modal';

const modal = new MDFModal(document.querySelector('.mdf-modal'));

// Open the request for the given URL.
modal.openRequest('example.org');

// Set any headers if you need to.
modal.setRequestHeader('Content-Type', 'text/html');

// Finally we request the element we need with a CSS selector.
modal.requestContent('.example');

Implementation

Classes

| Name | Type | Description | | ---------------------------- | ------------ | ------------------------------------------------ | | mdf-modal | Parent | Contains the modal content and backdrop | | mdf-modal--active | Modifier | 1. Prepares the modal to be visible | | mdf-modal--fade-in | Modifier | 2. Fades-in the modal and allows for interaction | | mdf-modal__content | Parent/Child | Content container. Child to .mdf-modal | | mdf-modal__content--padded | Modifier | Add padding to the content | | mdf-modal__close | Child | Closes the modal. Child to .mdf-modal | | mdf-modal__backdrop | Child | Modal backdrop. Child to .mdf-modal |

Events

| Name | Data | Description | | ----------------- | ------ | ----------------------------------------------- | | MDFModal:closed | null | Fires when the modal closes | | MDFModal:load | null | Fires when the requested modal content is ready | | MDFModal:open | null | Fires when the modal opens |

Properties

| Name | Type | Description | | ---------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | .container | HTMLElement | Returns the modal container element | | .request | XMLHttpRequest | Returns the current request | | .timeout | number | Get or set the request timeout value | | .readyState | number | Get the request readyState | | .open() | (): void | Open the modal | | .close() | (): void | Close the modal | | .append(elem) | (Element): void | Add the given element to the modal content | | .insertHTML(html) | (string): void | Insert the given string of HTML into the modal content | | .openRequest(url) | (string): void | Open the request for the given URL | | .setRequestHeader(header, value) | (string, string): void | Add header to the request. May be called repeatedly to add multiple headers | | .requestContent(selector) | (string): void | Request the element with the given selector from the opened URL | | .on(type, listener, options?) | (string, EventListenerOrEventListenerObject, AddEventListenerOptions): void | Listen to Modal specific events. Allowed values are load open close. |