GModal

A tiny easy to use 6kb size modal with zero dependencies:

Start

Download the latest version from GitHub or via package managers:

npm i @lastofpudge/g-modal
yarn add @lastofpudge/g-modal

Initialize modal:

new GModal.init(".js-modal", {
  closeDelay: 200,
});

.js-modal is a selector for the modal open button.

You can specify a target for the modal buttons:

data-target="#target"

You also can specify modal open/close effects:

data-open="tmHorizontalIn" data-close="tmHorizontalOut"

To use custom effects, create css animation and call it in data-open/close attributes

Close buttons should contain a class called "js-modal-close".

To change the modal position, you can modify style props: ".g-modal__overlay" "align-items/justify-content" properties.

Please also check for animations support: