Magnit Modal Demo

A zero-dependency, vanilla javascript (es6) modal web component.

Code examples can be found in the dev console by inspecting the script tags in each section.

Simple Modal

A classic example

A small group of themes included in the component for status messaging. Also, simple css variables to customize the theme.

Await the ask() method to get the method of closing as a result.

Choice:

Pass in a callback function into the ask(myCallback) method to validate whether or not a modal will be allowed to close.

Set a custom error message:

Choice:

One modal opening another, and interacting with the second modal's choice.

Set the content of the modal dynamically.

Await the submitForm() helper method to submit forms and await their result before closing the modal.