Author: | sellsteam13 |
---|---|
Views Total: | 457 views |
Official Page: | Go to website |
Last Update: | April 17, 2021 |
License: | MIT |
Preview:

Description:
AwesomeModal is a JavaScript class that enables you to display any inline content in a modal popup.
Minimal looking and easy to implement as an ES module.
How to use it:
1. Import the AwesomeModal’s stylesheet into the document.
<link rel="stylesheet" href="./css/AwesomeModal.css" />
2. Import the AwesomeModal component.
import AwesomeModal from './AwesomeModal.js';
3. Insert your modal content into the document.
<div class="awesomeModal"> <h2>This is awesome </h2> <p>Pure vanilla JavaScript modal component</p> </div>
4. Create a new instance of the AwesomeModal.
document.addEventListener('DOMContentLoaded', () => { window.myModal = new AwesomeModal('.awesomeModal'); };
5. Launch the modal when needed.
window.myModal.open();
6. Close the modal manually.
window.myModal.close();
7. Customize the modal with the following parameters:
document.addEventListener('DOMContentLoaded', () => { window.myModal = new AwesomeModal('.awesomeModal',{ // CSS class of the background overlay overlayClass: "awesomeModal__overlay", // backgroud color overlayBackground: 'rgba(0,0,0,.1)', // close the modal by clciking the background overlay overlayCloseAbleDisabled: false, // enable/disable animation modalAnimateDisabled: false }); }
8. Events.
- @close: triggered after closed
- @open: triggered after opened
9. Apply your own styles to the modal.
.awesomeModal { background-color: #222; padding: 40px; text-align: center; max-width: 400px; width: 100%; display: flex; flex-direction: column; align-items: center; border-radius: 5px; color: #fff; }