Press "Enter" to skip to content

Creating Modals Using Vanilla Javascript Plugin | AwesomeModal

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, modal codepen, bootstrap modal example


See Demo And Download

Official Website(sellsteam13): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *