@miraidesigns/modal v1.0.0

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

Events

Properties