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 . |