A tiny easy to use 6kb size modal with zero dependencies:
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: