Custom Element Modal Web Component Javascript Plugin

Modal Web Components are minimal, reusable vanilla js modal web components written in JavaScript.

How to make use of it:

1. Import modal.js into the document.

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

2. Add the custom element <mc-modal /> 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 item to switch the modal.

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

4. Enable the cancel button to close the form.

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

Read More –

Animated Modal Window Popup Library In Pure JavaScript | ModalJS
JavaScript Class To Create Bootstrap 5 Modal | BS5ModalJS


See Demo And Download

Official Website(maykbrito): Click Here

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

Share