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

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

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);

Check More – Add jQuery Simple Draggable Dialog & Modal Plugin

quick reference

custom attributes

  • type [default: none]: Setting this to message will create a modal similar to an “alert” dialog with an “Ok” button that closes the modal. No other values are valid.
  • close-button [default: true]: When this is true, the modal displays a close button in the header controls that closes the modal. When this is false, that button is removed.
  • use-shade [default: false]: When this is true, the modal hides the rest of the page behind a translucent shade. When this is false, the shade is entirely clear.
  • shade-close [default: false]: When this is true, clicking anywhere on the shade element will attempt to close the modal. When this is false, clicks on the shade are ignored.

slots:

  • title-icon: A small icon at the top-left corner of the modal. Usually used to reinforce context.
  • title: The text that will appear at the top of the modal.
  • controls: An element containing buttons that will appear in the top-right of the modal. Usually used for a “close” or “settings” function.
  • content:
  • choices:

themes:

  • default: A simple, basic style. Light Gray.
    • --font-color: #393939;
    • --primary-color: #707683;
    • --background-color: #e9e9eb;
  • info: A style to indicate information. Blue.
    • --font-color: #393939;
    • --primary-color: #3d84e5;
    • --background-color: #cde2ff;
  • success: A style to indicate success. Green.
    • --font-color: #393939;
    • --primary-color: #3ac279;
    • --background-color: #c5f7dc;
  • warning: A style to indicate caution. Yellow.
    • --font-color: #393939;
    • --primary-color: #e89f29;
    • --background-color: #ffe8c3;
  • error: A style to indicate failure. Red.
    • --font-color: #393939;
    • --primary-color: #e9594c;
    • --background-color: #ffcfcb;

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

Read More –

Morphing Material Design Floating Action Button With Modal
A Simple Overlay Modal Dialog Using JavaScript | overlayJS


See Demo And Download

Official Website(catapart): Click Here

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

Share