modal-js

Easily implement modals using minimal javascript. Supports Meteor, AngularJS, React, Polymer and any CSS library, e.g. Bootstrap.

Usage no npm install needed!

<script type="module">
  import modalJs from 'https://cdn.skypack.dev/modal-js';
</script>

README

Build Status npm version Bower version

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.