Minimal Modal Web Component (Custom Element)

Preview:

Description:

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>
    </div>
  </form>
</mc-modal>

3. Enable an element to toggle the modal.

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

4. Enable the cancel button tot close the modal.

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