Press "Enter" to skip to content

(es6) Vanilla Javascript Modal Web Component | magnit-modal

Magnit-modal is a JavaScript modal (ES6) web component designed to create custom alerts, quick dialogs, and confirm popups and content conditions on a web application.

modal web component, custom modal popup, best modal popup design, which plugin is used to create a modal bootstrap modal, html dialog popup

Features:

  • 5 themes: Default, Information, Success, Warning, and Information.
  • Modal in the modal. Multiple models are allowed.
  • Supports dynamic conditional content.

How to make use of it:

1. Import the magnit-modal JavaScript library as an online element.

<script defer type="module">
  import MagnitModalComponent from './dist/magnit-modal.component.min.js';
</script>

2. Add the <magnit-modal /> element to the net app. Available slots:

<magnit-modal class="simple" style="display:none;">
  <div slot="content">
    <div class="icon-container">
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.142 2l5.858 5.858v8.284l-5.858 5.858h-8.284l-5.858-5.858v-8.284l5.858-5.858h8.284zm.829-2h-9.942l-7.029 7.029v9.941l7.029 7.03h9.941l7.03-7.029v-9.942l-7.029-7.029zm-5.971 6h2v8h-2v-8zm1 12.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/></svg>
    </div>
    <div class="message">
      <h5 class="heading">Simple Modal</h5>
      <p class="detail">This is a simple message modal.</p>
    </div>
  </div>
</magnit-modal>

3. Show an ‘OK’ button contained in the modal.

<magnit-modal class="simple" style="display:none;" type="message">
  ...
</magnit-modal>

4. Determine the theme of the modal:

<magnit-modal class="info" style="display:none;" type="message">
  ...
</magnit-modal>

<magnit-modal class="success" style="display:none;" type="message">
  ...
</magnit-modal>

<magnit-modal class="warning" style="display:none;" type="message">
  ...
</magnit-modal>

<magnit-modal class="error" style="display:none;" type="message">
  ...
</magnit-modal>

5. Available attributes to customize the modal.

<magnit-modal class="info" style="display:none;" use-shade="true" type="message">
  ...
</magnit-modal>

6. Open the modal.

const $modal = document.querySelector('magnit-modal.simple');
$modal.open();

7. The instance under reveals the right way to create an affirmation dialog utilizing the ask() method.

<magnit-modal class="choice" style="display:none;">
  <div slot="content">
    <h5 class="heading">Select One</h5>
  </div>
  <ul slot="choices">
    <li><button class="a" type="button">Choice 1</button></li>
    <li><button class="b" type="button">Choice 2</button></li>
    <li><button class="c" type="button">Choice 3</button></li>
  </ul>
</magnit-modal>
const $choiceModal = document.querySelector('magnit-modal.choice');
const $choice = await $choiceModal.ask();
console.log($choice);

Modern ES6 Modal Dialog Web Component, magnit-modal Plugin/Github, webcomponents dialog, jquery modal popup


See Demo And Download

Official Website(catapart): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.