Author: | ohnaka0410 |
---|---|
Views Total: | 410 views |
Official Page: | Go to website |
Last Update: | April 24, 2021 |
License: | MIT |
Preview:

Description:
A minimal and easy JavaScript modal library to help developers create an animated, nice-looking, user-friendly modal dialogs on the web app.
More Features:
- Loads content from within the document.
- Auto traps focus within the modal.
- Prevents body scrolling when the modal is activated.
- Easy to customize with CSS.
Install & Download:
# NPM $ npm install @ohnaka0410/minimal-modal --save
How to use it:
1. Code the HTML for the modal and replace the modal title, body, and body as follows:
<div class="modal" id="modal-example"> <div class="modal__overlay js-close-modal-trigger" tabindex="-1"> <div class="modal__container"> <header class="modal__header"> <h2 class="modal__title"> Modal Title </h2> <button class="modal__close js-close-modal-trigger"> ✕ </button> </header> <main class="modal__content"> <p> Modal Content </p> </main> <footer class="modal__footer"> <button class="button js-close-modal-trigger">Close</button> </footer> </div> </div> </div>
2. The required CSS styles for the modal.
.modal { display: none; } .modal[open] { display: block; }
3. The example CSS to customize the modal styles & open/close animations.
.modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .modal__container { background-color: #fff; padding: .5rem; max-width: 400px; max-height: 100vh; border-radius: 4px; overflow-y: auto; box-sizing: border-box; } .modal__header { display: -webkit-box; display: flex; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center; padding: .5rem; } .modal__title { } .modal__close { margin-left: auto; } .modal__content { padding: .5rem; } .modal__footer { padding: .5rem; display: -webkit-box; display: flex; -webkit-box-pack: end; justify-content: flex-end; } @-webkit-keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes modalSlideIn { from { -webkit-transform: translateY(-15%); transform: translateY(-15%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes modalSlideIn { from { -webkit-transform: translateY(-15%); transform: translateY(-15%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } .modal[open] .modal__overlay { -webkit-animation: modalFadeIn .3s ease-in; animation: modalFadeIn .3s ease-in; } .modal[open] .modal__container { -webkit-animation: modalSlideIn .3s ease-in; animation: modalSlideIn .3s ease-in; } .modal .modal__container, .modal .modal__overlay { will-change: transform; }
4. Import the minimal-modal as an ES module.
import MinimalModal from '@ohnaka0410/minimal-modal';
5. Or load the UMD version in the document.
<!-- Local --> <script src="/path/to/dist/minimal-modal.min.js"></script> <!-- CDN --> <script src="https://cdn.jsdelivr.net/npm/@ohnaka0410/minimal-modal/dist/minimal-modal.min.js"></script>
6. Show the modal on page load.
MinimalModal.activate();
7. Or enable a toggle button to launch the modal.
// open const modal = document.querySelector('#modal-example'); MinimalModal.show(modal); // close MinimalModal.close();
Changelog:
v2.1.7 (04/24/2021)
- package updated
v2.1.6 (03/17/2021)
- update bodyScrollLockIgnore trigger
v2.1.1 (01/08/2021)
- fix scroll in modal
v2.1.0 (12/29/2020)
- Update
v2.0.1 (12/14/2020)
- Allows multiple modals
v1.0.4 (11/08/2020)
- Fixed for IE
v1.0.1 (10/28/2020)
- Fixed for IE