Custom Modal Component In Vanilla JavaScript – AwesomeModal

Category: Javascript , Modal & Popup | April 17, 2021
Author: sellsteam13
Views Total: 49 views
Official Page: Go to website
Last Update: April 17, 2021
License: MIT

Preview:

Custom Modal Component In Vanilla JavaScript – AwesomeModal

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

You Might Be Interested In:


Leave a Reply