Modal

Create simple (or advanced), high-performant modals with minimal javascript and markup. This library is built using native vanilla javascript, so it is lightweight and super fast.

Benefits

• Hide and show modals in any area in the DOM
• Respond to events when modals are shown and hidden
• Respects CSS transitions and delays
• Fully customizable modal containers and content
• Supports multiple modals and modals inside of a modals.. weee!

Usage

Create one or more modals with a few lines of javascript. With your html and css setup correctly, you can do:

let html = '<div class="my-modal">My Modal Content</div>';
let modal = new Modal(html, {
    containerEl: document.getElementById('modals-container'),
    activeClass: 'modal-active'
});
 
modal.show(); // show the modal
modal.hide(); // hide the modal

Respond when modal is shown (or hidden)

The library respects any css transitions you add to show and hide your modal. So given the following css:

.my-modal {
    visibility: hidden;
    opacity: 0;
    transition: opacity 1000ms linear;
}
 
.my-modal.modal-active {
    visibility: visible;
    opacity: 1;
}

You can do things after the modal fades in:

modal.show().then(function () {
    // fired after 1000 milliseconds, when the modal has been fully faded in
});

Examples

More details and example can be found here.

Notes

• Always try to place your modals in a high DOM level to prevent other elements from inadvertently affecting the modal's appearance and/or functionality.