How to make use of it:

1. Import the AwesomeModal’s stylesheet into the doc.

<link rel="stylesheet" href="./css/AwesomeModal.css" />

2. Import the AwesomeModal element.

import AwesomeModal from './AwesomeModal.js';

3. Insert your modal content into the doc.

<div class="awesomeModal">
  <h2>This is awesome </h2>
  <p>Pure vanilla JavaScript modal component</p>
</div>

4. Create a brand new occasion of the AwesomeModal.

document.addEventListener('DOMContentLoaded', () => { 
  window.myModal = new AwesomeModal('.awesomeModal');
};

5. Launch the modal when wanted.

window.myModal.open();

6. Close the modal manually.

window.myModal.close();

7. Customize the modal with the next 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. Apply your individual 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;
}

Custom Modal Component, AwesomeModal Plugin/Github

See Demo And Download