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 = html containerEl: document activeClass: 'modal-active'; modal; // show the modalmodal; // 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:
You can do things after the modal fades in:
modal;
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.