Creating Modals Using Vanilla Javascript Plugin | AwesomeModal

awesome-modal-popup

AwesomeModal is a lightweight JavaScript plugin for creating custom forms. Awesome Modal is a JavaScript class that enables you to display any contained content in a modal popup. Simple and easy-to-implement look as an ES unit.

reusable react modal component, react custom modal component, custom modal, native custom modal, modal functional component, open modal from another component

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

Official Website(sellsteam13): Click Here

This superior jQuery/javascript plugin is developed by sellsteam13. For extra Advanced usage, please go to the official website.

Share