Custom Modal Component In Vanilla JavaScript – AwesomeModal

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;
}