Minimal Modal Web Component (Custom Element)

Category: Javascript , Modal & Popup | October 16, 2021
Views Total:141 views
Official Page:Go to website
Last Update:October 16, 2021


Minimal Modal Web Component (Custom Element)


A minimal reusable modal web component written in JavaScript.

How to use it:

1. Import the modal.js into the document.

<script src="./modal.js"></script>

2. Add the <mc-modal /> custom element to the page.

<mc-modal id="modal">
  <h2>Modal Component</h2>
  <p>Built using Web Component</p>
  <form action="#" method="POST">
    <label class="sr-only" for-id="password">Your Password:</label>
    <input type="password" id="password" name="password" placeholder="Password" />
    <div class="buttons">
      <div id="closeModal" class="button grey cancel">Cancel</div>
      <button class="red">Confirm</button>

3. Enable an element to toggle the modal.

openModal.addEventListener('click', () =>

4. Enable the cancel button tot close the modal.

closeModal.addEventListener('click', () => modal.close())

You Might Be Interested In:

Leave a Reply